/* Editor chrome overrides */
#topbar #toplinks > button#header-about,
#topbar #toplinks > button#header-forums,
#topbar #toplinks > button#header-load {
  display: none !important;
}

#topbar #toplinks > button#header-settings::before,
#topbar #toplinks > button#header-discord::before {
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.35) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  background-size: 18px 18px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

#topbar #toplinks > button#header-settings::before {
  background-image: url(/song-maker/images/icon-settings-gray.svg) !important;
}

#topbar #toplinks > button#header-discord::before {
  background-image: url(/song-maker/images/discord.svg) !important;
}

/* Bottom bar icon buttons — icons on dark discs, themed via reboot-bridge */
#bottom .button:not(#instrument-toggle-button):not(#percussion-toggle-button)::before,
#bottom .clear-button::before {
  filter: none !important;
  -webkit-filter: none !important;
}

#bottom #settings-button,
#bottom #save-button,
#bottom #import-button,
#bottom #undo-button,
#bottom #zoom-grid-button {
  color: transparent;
  font-size: 0;
}

#bottom #play-button::before,
#bottom #settings-button::before,
#bottom #save-button::before,
#bottom #import-button::before,
#bottom #undo-button::before,
#bottom #zoom-grid-button::before {
  display: block !important;
  content: "" !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: var(--smr-transport-icon, 42%) var(--smr-transport-icon, 42%) !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

#bottom #save-button::before {
  background-image: url("/song-maker/images/icon-btn-save.svg") !important;
}

#bottom #import-button::before {
  background-image: url("/song-maker/images/icon-btn-import.svg") !important;
}

#bottom #settings-button::before {
  background-image: url("/song-maker/images/icon-btn-settings.svg") !important;
}

#bottom #undo-button::before {
  background-image: url("/song-maker/images/icon-btn-undo.svg") !important;
}

#bottom #zoom-grid-button::before {
  background-image: url("/song-maker/images/icon-btn-zoom.svg") !important;
}

#bottom #undo-button::before,
#bottom #reset-button::before {
  filter: none !important;
  -webkit-filter: none !important;
}

#bottom #undo-button:hover::before,
#bottom #reset-button:hover::before {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

#bottom #settings-button,
#bottom #save-button,
#bottom #import-button,
#bottom #undo-button,
#bottom #reset-button,
#bottom #zoom-grid-button {
  transition: filter 0.12s ease;
}

#bottom #zoom-grid-button {
  appearance: none;
  -webkit-appearance: none;
  color: transparent;
  font-size: 0;
}

html.smr-zoom-grid-out,
html.smr-zoom-grid-out body {
  transform: none !important;
  zoom: normal !important;
}

html.smr-zoom-grid-out #grid-container,
body.smr-zoom-grid-out #grid-container,
html.smr-zoom-grid-out #canvas-container,
body.smr-zoom-grid-out #canvas-container,
html.smr-zoom-grid-out #scroll-container,
body.smr-zoom-grid-out #scroll-container {
  transform: none !important;
  zoom: normal !important;
}

html.smr-zoom-grid-out #grid-container,
body.smr-zoom-grid-out #grid-container {
  z-index: 1 !important;
  overflow: hidden !important;
  pointer-events: auto !important;
}

html.smr-zoom-grid-out #bottom,
body.smr-zoom-grid-out #bottom {
  z-index: 10000 !important;
  pointer-events: auto !important;
  position: relative !important;
  isolation: isolate;
}

html.smr-zoom-grid-out #bottom .button,
html.smr-zoom-grid-out #bottom select,
html.smr-zoom-grid-out #bottom input,
body.smr-zoom-grid-out #bottom .button,
body.smr-zoom-grid-out #bottom select,
body.smr-zoom-grid-out #bottom input {
  pointer-events: auto !important;
}

html.smr-zoom-grid-out .scrollbar-vertical,
body.smr-zoom-grid-out .scrollbar-vertical {
  display: none !important;
  pointer-events: none !important;
}

html.smr-zoom-grid-out .scrollbar-horizontal,
body.smr-zoom-grid-out .scrollbar-horizontal {
  z-index: 2 !important;
  pointer-events: auto;
  right: 0 !important;
}

.smr-appearance-panel .smr-zoom-fit-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
  cursor: pointer;
}

.smr-appearance-panel .smr-zoom-fit-check input {
  width: auto;
  margin: 0;
}

#bottom #settings-button:hover,
#bottom #save-button:hover,
#bottom #import-button:hover {
  filter: brightness(1.08);
}

.settings-page-shell {
  width: min(640px, 100%);
  margin: clamp(16px, 4vw, 40px) auto;
  padding: 0 12px 48px;
}

.settings-page-shell h1 {
  margin: 0 0 8px;
}

.settings-page-shell select {
  width: 100%;
  margin-bottom: 16px;
}

.settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 24px;
}

#audio-gate {
  display: none !important;
}

.smr-appearance-panel {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  text-align: left;
}

.smr-appearance-panel h4 {
  margin: 0 0 12px;
  font-family: Quicksand, var(--sm-font-body, system-ui, sans-serif);
  color: var(--smr-accent, var(--sm-accent));
}

.smr-appearance-panel label {
  display: block;
  margin-bottom: 10px;
  font-size: 0.85rem;
  color: #fff;
}

.smr-appearance-panel select {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: #0a0a0f;
  color: #fff;
  font-family: inherit;
}

#smr-appearance-apply {
  margin-top: 8px;
  padding: 8px 16px;
  border: none;
  border-radius: 999px;
  background: var(--smr-accent, var(--editor-accent, var(--sm-accent)));
  color: #fff;
  font-family: Quicksand, var(--sm-font-body, system-ui, sans-serif);
  font-weight: 700;
  cursor: pointer;
}

#smr-toast {
  position: fixed;
  left: 50%;
  bottom: 128px;
  transform: translateX(-50%) translateY(12px);
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(10, 10, 15, 0.92);
  border: 1px solid color-mix(in srgb, var(--smr-accent, var(--sm-accent)) 35%, transparent);
  color: #fff;
  font-family: Quicksand, var(--sm-font-body, system-ui, sans-serif);
  font-size: 14px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 10000;
}

#smr-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.smr-save-panel,
.smr-midi-modal,
.smr-png-modal {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.65);
  padding: 16px;
}

.smr-save-panel.open,
.smr-midi-modal.open,
.smr-png-modal.open {
  display: flex;
}

.smr-save-panel-card,
.smr-midi-modal-card,
.smr-png-modal-card {
  width: min(480px, 100%);
  max-height: 90vh;
  overflow: auto;
  background: linear-gradient(
    180deg,
    var(--editor-bar-top, var(--sm-panel, #12121a)),
    var(--editor-bg, var(--sm-bg, #0a0a0f))
  );
  border: 1px solid var(--editor-border, var(--sm-border, rgba(255, 255, 255, 0.14)));
  border-radius: 16px;
  padding: 20px;
  position: relative;
  color: var(--editor-text, var(--sm-text, #eef0f4));
  font-family: Quicksand, var(--sm-font-body, system-ui, sans-serif);
}

.smr-save-close,
.smr-midi-close,
.smr-png-close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: none;
  background: transparent;
  color: var(--editor-muted, var(--sm-muted, #a8abb8));
  font-size: 1.5rem;
  cursor: pointer;
}

.smr-save-panel label,
.smr-midi-modal label,
.smr-png-modal label {
  display: block;
  margin: 12px 0 6px;
  font-size: 0.85rem;
  color: var(--editor-muted, var(--sm-muted, #a8abb8));
}

.smr-save-panel input,
.smr-save-panel select,
.smr-midi-modal select,
.smr-png-modal input[type="number"] {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--editor-border, var(--sm-border, rgba(255, 255, 255, 0.14)));
  background: var(--editor-bg, var(--sm-bg, #0a0a0f));
  color: var(--editor-text, var(--sm-text, #eef0f4));
  font-family: inherit;
}

.smr-save-downloads {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 16px 0;
}

.smr-save-downloads button {
  padding: 10px 8px;
  border: none;
  border-radius: 10px;
  background: var(--smr-accent, var(--editor-accent, var(--sm-accent)));
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
}

.smr-save-apply,
.smr-midi-actions button:last-child {
  width: 100%;
  margin-top: 8px;
  padding: 12px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    var(--editor-accent, var(--smr-accent, var(--sm-link, var(--sm-accent)))),
    color-mix(in srgb, var(--editor-accent, var(--smr-accent, var(--editor-accent, var(--sm-accent)))) 72%, #000)
  );
  color: var(--editor-text-on-accent, var(--sm-text-on-accent, #fff));
  font-weight: 700;
  cursor: pointer;
}

.smr-save-choice-msg {
  margin: 8px 0 16px;
  color: var(--editor-muted, var(--sm-muted, #a8abb8));
  line-height: 1.45;
}

.smr-save-choice-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.smr-save-choice-btn {
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--editor-border, var(--sm-border, rgba(255, 255, 255, 0.14)));
  background: var(--editor-bg, var(--sm-bg, #0a0a0f));
  color: var(--editor-text, var(--sm-text, #eef0f4));
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
}

.smr-save-choice-btn--primary {
  background: var(--smr-accent, var(--editor-accent, var(--sm-accent)));
  border-color: transparent;
  color: var(--editor-text-on-accent, #fff);
}

.smr-midi-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.smr-midi-actions button {
  flex: 1;
  padding: 10px;
  border-radius: 999px;
  border: 1px solid var(--editor-border, var(--sm-border, rgba(255, 255, 255, 0.2)));
  background: transparent;
  color: var(--editor-text, var(--sm-text, #eef0f4));
  cursor: pointer;
}

.smr-midi-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.smr-midi-hint {
  color: var(--editor-muted, var(--sm-muted, #a8abb8));
  font-size: 0.85rem;
  margin: 0 0 8px;
}

.smr-png-dim-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.smr-png-dim-row label {
  margin-top: 8px;
}

.smr-png-preview-wrap {
  margin-top: 14px;
  border-radius: 12px;
  border: 1px solid var(--editor-border, var(--sm-border, rgba(255, 255, 255, 0.14)));
  background: rgba(0, 0, 0, 0.25);
  padding: 10px;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#smr-png-preview {
  display: none;
  max-width: 100%;
  max-height: 220px;
  border-radius: 8px;
  image-rendering: pixelated;
}

.smr-png-modal input[type="number"]:disabled {
  opacity: 0.45;
}

.smr-midi-stepper {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.smr-midi-step {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--editor-border, var(--sm-border, rgba(255, 255, 255, 0.18)));
  background: var(--editor-bg, var(--sm-bg, #0a0a0f));
  color: var(--editor-text, var(--sm-text, #eef0f4));
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.smr-midi-step:hover:not(:disabled) {
  background: var(--editor-hover-bg, var(--sm-hover-bg, rgba(96, 165, 250, 0.18)));
  border-color: var(--editor-accent, var(--sm-link, var(--sm-accent)));
  box-shadow: 0 0 10px color-mix(in srgb, var(--editor-accent, var(--sm-link, var(--sm-accent))) 25%, transparent);
}

.smr-midi-step:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.smr-midi-step-val {
  flex: 1;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  padding: 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

body.smr-drag-midi::after {
  content: "Drop MIDI to import";
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--smr-accent, var(--editor-accent, var(--sm-accent))) 15%, transparent);
  border: 3px dashed var(--smr-accent, var(--sm-accent));
  color: #fff;
  font-family: Quicksand, var(--sm-font-body, system-ui, sans-serif);
  font-size: 1.4rem;
  font-weight: 700;
  pointer-events: none;
}

#loading-modal img[src*="animated-loader"],
img[src*="loading.gif"] {
  display: none !important;
}

/* Legacy CML boot modal — loading-overlay.js owns the boot UX */
.modal.open-loading,
#loading-modal {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

.smr-loading-title {
  margin: 0 0 4px;
  font-size: clamp(1.35rem, 3.5vw, 1.65rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--smr-text, #eef0f4);
}

.editor-loading-shell {
  position: absolute;
  inset: 0;
  z-index: 100003;
}

.editor-loading .editor-loading-shell {
  position: relative;
  inset: auto;
  flex: 1;
  min-height: 60vh;
}

/* Verbose playful loading overlay (loading-overlay.js) */
.track-mode-root .smr-loading-overlay {
  z-index: 100050;
}

.smr-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--smr-accent, var(--editor-accent, #60a5fa)) 16%, transparent), transparent 55%),
    rgba(6, 6, 10, 0.92);
  opacity: 1;
  pointer-events: all;
}

.smr-loading-overlay.visible {
  opacity: 1;
}

.smr-loading-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}

.smr-loading-card {
  width: min(420px, 100%);
  text-align: center;
  padding: 28px 24px 22px;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--smr-accent, var(--editor-accent, #60a5fa)) 28%, rgba(255, 255, 255, 0.12));
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--smr-bar-top, #14141f) 88%, #000),
    color-mix(in srgb, var(--smr-bg, #0a0a0f) 92%, #000)
  );
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: var(--smr-text, #eef0f4);
  font-family: Quicksand, Poppins, var(--sm-font-body, system-ui, sans-serif);
  animation: smr-loading-card-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes smr-loading-card-in {
  from {
    transform: translateY(8px) scale(0.992);
  }
  to {
    transform: none;
  }
}

.smr-loading-art {
  display: grid;
  place-items: center;
  overflow: visible;
  min-height: 220px;
  margin-bottom: 12px;
}

.smr-loading-canvas,
.smr-loading-img,
.smr-loading-animation,
.smr-loading-art svg {
  display: block;
  max-width: min(360px, 90vw);
  width: min(360px, 90vw);
  height: auto;
  max-height: none;
  aspect-ratio: 553 / 350.87;
  image-rendering: auto;
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.35));
  pointer-events: none;
  border: 0;
  overflow: visible;
}

.smr-loading-spinner {
  display: none;
  width: min(88px, 22vw);
  height: min(88px, 22vw);
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.12);
  border-top-color: var(--smr-accent, var(--editor-accent, #60a5fa));
  animation: smr-loading-spin 0.85s linear infinite;
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.35));
}

.smr-loading-spinner.is-visible {
  display: block;
}

@keyframes smr-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Settings modal quantity steppers — match dark site theme */
#settings-modal .quantity-button {
  background: color-mix(in srgb, var(--smr-bar-top, #14141f) 82%, #000) !important;
  border: 1px solid color-mix(in srgb, var(--smr-accent, var(--editor-accent, #60a5fa)) 35%, rgba(255, 255, 255, 0.14)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

#settings-modal .quantity-button:hover {
  background: color-mix(in srgb, var(--smr-accent, var(--editor-accent, #60a5fa)) 18%, var(--smr-bar-top, #14141f)) !important;
  border-color: color-mix(in srgb, var(--smr-accent, var(--editor-accent, #60a5fa)) 55%, rgba(255, 255, 255, 0.18)) !important;
}

#settings-modal .quantity-button:active {
  transform: scale(0.96);
}

#settings-modal .quantity-button img {
  filter: brightness(0) saturate(100%)
    invert(72%)
    sepia(28%)
    saturate(1200%)
    hue-rotate(186deg)
    brightness(103%)
    contrast(101%);
}

#settings-modal .quantity-cover,
#settings-modal .quantity-label {
  color: var(--smr-link, var(--smr-accent, var(--editor-accent, #93c5fd))) !important;
}

#settings-modal .setting-group label {
  color: var(--smr-text, #eef0f4) !important;
}

#settings-modal .setting-group select,
#settings-modal .select-wrap .dupe {
  color: var(--smr-link, var(--smr-accent, var(--editor-accent, #93c5fd))) !important;
}

.smr-loading-status {
  margin: 0 0 6px;
  font-size: clamp(1rem, 2.8vw, 1.15rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--smr-link, var(--smr-accent, var(--editor-accent, #93c5fd)));
}

.smr-loading-progress {
  margin: 0 0 14px;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--smr-muted, #a8abb8);
  font-variant-numeric: tabular-nums;
}

.smr-loading-bar {
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}

.smr-loading-bar-fill {
  display: block;
  width: 36%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--smr-accent, var(--editor-accent, #60a5fa)) 70%, #000),
    var(--smr-accent, var(--editor-accent, #60a5fa)),
    color-mix(in srgb, var(--smr-accent, var(--editor-accent, #60a5fa)) 70%, #000)
  );
  transition: width 0.25s ease;
}

.smr-loading-bar-fill.is-indeterminate {
  animation: smr-loading-bar-sweep 1.35s ease-in-out infinite;
}

@keyframes smr-loading-bar-sweep {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}

@media (prefers-reduced-motion: reduce) {
  .smr-loading-card {
    animation: none !important;
  }

  .smr-loading-bar-fill.is-indeterminate {
    animation: none !important;
    transform: none;
  }
}

.modal.open-loading {
  animation: none;
}

body:has(.smr-loading-overlay.visible) .modal.open-loading {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.smr-audio-only #topbar,
body.smr-audio-only #bottombar,
body.smr-audio-only #grid-container,
body.smr-audio-only #settings-modal,
body.smr-audio-only .modal.open-loading {
  display: none !important;
}

body.smr-audio-only #play-button {
  position: fixed;
  left: -9999px;
}

body.smr-merged-chrome #topbar {
  display: none !important;
}

/* Iframe top chrome (standalone / non-merged) — theme via --smr-* / --editor-* vars */
#topbar {
  background-color: transparent !important;
  background-image: linear-gradient(
    180deg,
    var(--smr-bar-top, var(--editor-bar-top, #14141f)),
    var(--smr-bar-bottom, var(--editor-bar-bottom, #101018))
  ) !important;
  border-bottom: 3px solid var(--smr-bar-border, var(--editor-bar-border, var(--smr-accent, var(--editor-accent, var(--sm-accent))))) !important;
  box-shadow: none !important;
}

#topbar .header-link,
#topbar #header-back,
#topbar #toplinks > button {
  color: var(--smr-text, var(--editor-text, #eef0f4)) !important;
}

#topbar #header-logo,
#topbar .header-title {
  color: var(--smr-link, var(--editor-link, var(--smr-accent, var(--editor-accent, var(--sm-accent))))) !important;
}

#gamepad label,
#gamepad select,
#gamepad input {
  color: var(--smr-muted, var(--editor-muted, #a8abb8)) !important;
}

#gamepad select,
#gamepad input {
  background: var(--smr-bar-bg, var(--editor-surface, #1f232d)) !important;
  border-color: var(--smr-accent, var(--editor-accent, var(--sm-accent))) !important;
}

/* Basic mode (merged chrome): three-zone bottom transport bar.
   148px fits Tempo + Instrument + Percussion (28px rows, 8px gaps)
   plus 10/16 padding and the 4px top border under border-box. */
:root {
  --smr-bottom-bar-height: 148px;
  /* One diameter + glyph scale for every round transport control. */
  --smr-transport-size: 44px;
  --smr-transport-icon: 42%;
  --smr-slider-track: 6px;
  --smr-slider-thumb: 16px;
  --smr-slider-height: 28px;
  --smr-slider-font: 12px;
  --smr-slider-label: 54px;
  --smr-slider-value: 48px;
  --smr-safe-bottom: env(safe-area-inset-bottom, 0px);
  --smr-bottom-pad: max(16px, calc(12px + env(safe-area-inset-bottom, 0px)));
}

@media (pointer: coarse) {
  :root {
    --smr-slider-thumb: 20px;
    --smr-slider-height: 32px;
  }
}

@media (max-width: 560px) {
  :root {
    --smr-bottom-bar-height: 148px;
  }
}

@media (max-width: 495px) {
  :root {
    --smr-bottom-bar-height: 196px;
  }
}

html.smr-merged-chrome #bottom,
body.smr-merged-chrome #bottom,
html.smr-track-mode-iframe:not(.smr-track-grid-only) #bottom,
body.smr-track-mode-iframe:not(.smr-track-grid-only) #bottom {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(190px, min(38vw, 380px)) minmax(0, auto) !important;
  grid-template-areas: "left center right" !important;
  align-items: stretch !important;
  column-gap: clamp(8px, 1.4vw, 16px) !important;
  padding: 10px clamp(12px, 1.5vw, 20px) var(--smr-bottom-pad, 16px) !important;
  box-sizing: border-box !important;
  height: auto !important;
  min-height: var(--smr-bottom-bar-height) !important;
  text-align: initial !important;
  overflow: visible !important;
  /* In-flow at the bottom of the iframe flex column. Main.js creates #bottom
     before #grid-container; order + appendChild in pinTransportBar keep grid
     on top and the transport bar below. */
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  order: 2 !important;
  flex: 0 0 auto !important;
  margin-top: auto !important;
  width: 100% !important;
  z-index: 10000 !important;
  isolation: isolate !important;
  pointer-events: auto !important;
}

html.smr-merged-chrome #bottom-left,
body.smr-merged-chrome #bottom-left,
html.smr-track-grid-only #bottom-left,
body.smr-track-grid-only #bottom-left,
html.smr-track-mode-iframe #bottom-left,
body.smr-track-mode-iframe #bottom-left {
  grid-area: left !important;
  position: relative !important;
  z-index: 5 !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  align-content: center !important;
  flex-wrap: wrap !important;
  gap: clamp(4px, 0.8vw, 10px) !important;
  min-width: 0 !important;
  width: auto !important;
  justify-content: flex-start !important;
}

/* Tempo + Instrument + Percussion share one track column.
   Native Main.js kept Tempo narrower:
   #tempo-slider { width: calc(100% - 780px); max-width: 450px }
   #tempo-slider .range-cover { position: absolute; left: 76px; width: calc(100% - 146px) }
   tablet: width: calc(100% - 660px); mobile: #tempo-slider 43px, .range-cover 154px.
   display:contents unwraps native/injected rows into this grid so those widths cannot shrink the track. */
html.smr-merged-chrome #bottom-center,
body.smr-merged-chrome #bottom-center,
html.smr-track-grid-only #bottom-center,
body.smr-track-grid-only #bottom-center,
html.smr-track-mode-iframe #bottom-center,
body.smr-track-mode-iframe #bottom-center {
  grid-area: center !important;
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-columns:
    minmax(var(--smr-slider-label, 54px), max-content)
    minmax(0, 1fr)
    minmax(var(--smr-slider-value, 48px), max-content) !important;
  grid-auto-rows: minmax(var(--smr-slider-height, 28px), auto) !important;
  align-items: center !important;
  justify-items: stretch !important;
  column-gap: clamp(6px, 1vw, 10px) !important;
  row-gap: 8px !important;
  min-width: 0 !important;
  width: 100% !important;
  padding: 4px 0 12px !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

html.smr-merged-chrome #bottom-right,
body.smr-merged-chrome #bottom-right,
html.smr-track-grid-only #bottom-right,
body.smr-track-grid-only #bottom-right,
html.smr-track-mode-iframe #bottom-right,
body.smr-track-mode-iframe #bottom-right {
  grid-area: right !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  align-content: center !important;
  flex-wrap: wrap !important;
  gap: clamp(4px, 0.8vw, 10px) !important;
  min-width: 0 !important;
  width: auto !important;
  justify-content: flex-end !important;
}

html.smr-merged-chrome #bottom-left::after,
body.smr-merged-chrome #bottom-left::after,
html.smr-merged-chrome #bottom-right::after,
body.smr-merged-chrome #bottom-right::after {
  display: none !important;
  content: none !important;
}

html.smr-merged-chrome #meter-button,
html.smr-merged-chrome #midi-button,
html.smr-merged-chrome #reset-button,
body.smr-merged-chrome #meter-button,
body.smr-merged-chrome #midi-button,
body.smr-merged-chrome #reset-button {
  display: none !important;
}

html.smr-merged-chrome #tempo-slider,
body.smr-merged-chrome #tempo-slider,
html.smr-merged-chrome #tempo-slider.show,
body.smr-merged-chrome #tempo-slider.show,
html.smr-track-grid-only #tempo-slider,
body.smr-track-grid-only #tempo-slider,
html.smr-track-grid-only #tempo-slider.show,
body.smr-track-grid-only #tempo-slider.show,
html.smr-track-mode-iframe #tempo-slider,
body.smr-track-mode-iframe #tempo-slider,
html.smr-track-mode-iframe #tempo-slider.show,
body.smr-track-mode-iframe #tempo-slider.show {
  display: contents !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

html.smr-merged-chrome #tempo-slider label,
body.smr-merged-chrome #tempo-slider label,
html.smr-track-grid-only #tempo-slider label,
body.smr-track-grid-only #tempo-slider label,
html.smr-track-mode-iframe #tempo-slider label,
body.smr-track-mode-iframe #tempo-slider label {
  display: block !important;
  float: none !important;
  position: static !important;
  margin: 0 !important;
  grid-column: 1 !important;
  justify-self: start !important;
  width: auto !important;
  min-width: 0 !important;
  font-size: var(--smr-slider-font, 12px) !important;
  line-height: 1.2 !important;
  text-align: left !important;
  white-space: nowrap !important;
}

html.smr-merged-chrome #tempo-slider .range-cover,
body.smr-merged-chrome #tempo-slider .range-cover,
html.smr-track-grid-only #tempo-slider .range-cover,
body.smr-track-grid-only #tempo-slider .range-cover,
html.smr-track-mode-iframe #tempo-slider .range-cover,
body.smr-track-mode-iframe #tempo-slider .range-cover {
  position: relative !important;
  display: block !important;
  grid-column: 2 !important;
  justify-self: stretch !important;
  left: 0 !important;
  top: auto !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: var(--smr-slider-height, 28px) !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

html.smr-merged-chrome #tempo-slider input.input-number,
body.smr-merged-chrome #tempo-slider input.input-number,
html.smr-track-grid-only #tempo-slider input.input-number,
body.smr-track-grid-only #tempo-slider input.input-number,
html.smr-track-mode-iframe #tempo-slider input.input-number,
body.smr-track-mode-iframe #tempo-slider input.input-number {
  position: static !important;
  float: none !important;
  margin: 0 !important;
  grid-column: 3 !important;
  justify-self: stretch !important;
  min-width: var(--smr-slider-value, 48px) !important;
  width: auto !important;
  max-width: none !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  text-align: center !important;
  pointer-events: auto !important;
  font-size: var(--smr-slider-font, 12px) !important;
  font-weight: 700 !important;
  color: var(--smr-link, var(--smr-accent, var(--editor-accent, var(--sm-accent)))) !important;
}

.smr-volume-stack,
html.smr-merged-chrome .smr-volume-stack,
body.smr-merged-chrome .smr-volume-stack,
html.smr-track-grid-only .smr-volume-stack,
body.smr-track-grid-only .smr-volume-stack,
html.smr-track-mode-iframe .smr-volume-stack,
body.smr-track-mode-iframe .smr-volume-stack,
.smr-volume-control,
.smr-volume-control.show,
html.smr-merged-chrome .smr-volume-control,
body.smr-merged-chrome .smr-volume-control,
html.smr-track-grid-only .smr-volume-control,
body.smr-track-grid-only .smr-volume-control,
html.smr-track-mode-iframe .smr-volume-control,
body.smr-track-mode-iframe .smr-volume-control {
  display: contents !important;
}

.smr-volume-control label {
  display: block;
  grid-column: 1 !important;
  justify-self: start;
  width: auto;
  min-width: 0;
  margin: 0;
  font-size: var(--smr-slider-font, 12px);
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
  color: var(--smr-muted, #a8abb8);
  font-family: Quicksand, Poppins, var(--sm-font-body, system-ui, sans-serif);
}

.smr-volume-control .range-cover {
  position: relative;
  display: block;
  grid-column: 2 !important;
  justify-self: stretch;
  width: 100%;
  max-width: none;
  min-width: 0;
  height: var(--smr-slider-height, 28px);
  overflow: visible;
  pointer-events: auto;
}

.smr-volume-control input[type="range"] {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--smr-slider-height, 28px);
  margin: 0;
  cursor: pointer;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  opacity: 0 !important;
  z-index: 3;
  pointer-events: auto !important;
}

.smr-volume-control .range-dupe {
  position: absolute;
  left: 0;
  top: 50%;
  bottom: auto;
  height: var(--smr-slider-track, 6px);
  transform: translateY(-50%);
  border-radius: 999px;
  background: var(--smr-accent, var(--editor-accent, var(--sm-accent)));
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}

.smr-volume-control .range-cover::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: var(--smr-slider-track, 6px);
  transform: translateY(-50%);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  pointer-events: none;
  z-index: 0;
}

#tempo-slider .range-cover::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: var(--smr-slider-track, 6px);
  transform: translateY(-50%);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  pointer-events: none;
  z-index: 0;
}

.smr-volume-control .range-dupe::before {
  content: "" !important;
  position: absolute !important;
  right: calc(var(--smr-slider-thumb, 16px) / -2) !important;
  top: 50% !important;
  left: auto !important;
  bottom: auto !important;
  width: var(--smr-slider-thumb, 16px) !important;
  height: var(--smr-slider-thumb, 16px) !important;
  transform: translateY(-50%) !important;
  border-radius: 50% !important;
  background: var(--smr-accent, var(--editor-accent, var(--sm-accent))) !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85) !important;
}

.smr-volume-control input[type="range"]::-webkit-slider-runnable-track {
  height: var(--smr-slider-track, 6px);
  border-radius: 999px;
  background: transparent;
}

/* WebKit only — never group with ::-moz-range-thumb or Chrome drops this rule.
   Keep a real 16×28 hit target. display:none / width:0 made the native range
   undraggable, and range-dupe is paint-only (pointer-events:none). */
.smr-volume-control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: block !important;
  width: var(--smr-slider-thumb, 16px) !important;
  height: var(--smr-slider-height, 28px) !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  opacity: 0 !important;
  pointer-events: auto !important;
}

.smr-volume-control input[type="range"]::-moz-range-track {
  height: var(--smr-slider-track, 6px);
  border-radius: 999px;
  background: transparent;
}

.smr-volume-control input[type="range"]::-moz-range-thumb {
  appearance: none !important;
  display: block !important;
  width: var(--smr-slider-thumb, 16px) !important;
  height: var(--smr-slider-height, 28px) !important;
  background: transparent !important;
  border: none !important;
  opacity: 0 !important;
  pointer-events: auto !important;
}

.smr-volume-control input[type="range"]::-ms-thumb {
  display: block !important;
  width: var(--smr-slider-thumb, 16px) !important;
  height: var(--smr-slider-height, 28px) !important;
  background: transparent !important;
  border: none !important;
  opacity: 0 !important;
  pointer-events: auto !important;
}

.smr-volume-control #smr-volume-value,
.smr-volume-control .smr-volume-value {
  grid-column: 3 !important;
  justify-self: stretch;
  min-width: var(--smr-slider-value, 48px);
  width: auto;
  max-width: none;
  box-sizing: border-box;
  overflow: visible;
  text-align: center;
  font-size: var(--smr-slider-font, 12px);
  font-weight: 700;
  color: var(--smr-link, var(--smr-accent, var(--editor-accent, var(--sm-accent))));
  font-family: Quicksand, Poppins, var(--sm-font-body, system-ui, sans-serif);
}

@media (max-width: 720px) {
  html.smr-merged-chrome #bottom-center,
  body.smr-merged-chrome #bottom-center,
  html.smr-track-grid-only #bottom-center,
  body.smr-track-grid-only #bottom-center,
  html.smr-track-mode-iframe #bottom-center,
  body.smr-track-mode-iframe #bottom-center {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(var(--smr-slider-value, 48px), max-content) !important;
  }

  html.smr-merged-chrome #tempo-slider .range-cover,
  body.smr-merged-chrome #tempo-slider .range-cover,
  html.smr-track-grid-only #tempo-slider .range-cover,
  body.smr-track-grid-only #tempo-slider .range-cover,
  html.smr-track-mode-iframe #tempo-slider .range-cover,
  body.smr-track-mode-iframe #tempo-slider .range-cover,
  html.smr-merged-chrome .smr-volume-control .range-cover,
  body.smr-merged-chrome .smr-volume-control .range-cover,
  .smr-volume-control .range-cover {
    grid-column: 1 !important;
  }

  html.smr-merged-chrome #tempo-slider input.input-number,
  body.smr-merged-chrome #tempo-slider input.input-number,
  html.smr-track-grid-only #tempo-slider input.input-number,
  body.smr-track-grid-only #tempo-slider input.input-number,
  html.smr-track-mode-iframe #tempo-slider input.input-number,
  body.smr-track-mode-iframe #tempo-slider input.input-number,
  html.smr-merged-chrome .smr-volume-control .smr-volume-value,
  body.smr-merged-chrome .smr-volume-control .smr-volume-value,
  .smr-volume-control .smr-volume-value {
    grid-column: 2 !important;
  }
}

html.smr-merged-chrome #bottom .button:not(#instrument-toggle-button):not(#percussion-toggle-button),
body.smr-merged-chrome #bottom .button:not(#instrument-toggle-button):not(#percussion-toggle-button),
html.smr-merged-chrome #bottom .clear-button,
body.smr-merged-chrome #bottom .clear-button,
html.smr-track-grid-only #bottom .button:not(#instrument-toggle-button):not(#percussion-toggle-button),
body.smr-track-grid-only #bottom .button:not(#instrument-toggle-button):not(#percussion-toggle-button),
html.smr-track-grid-only #bottom .clear-button,
body.smr-track-grid-only #bottom .clear-button,
html.smr-track-mode-iframe #bottom .button:not(#instrument-toggle-button):not(#percussion-toggle-button),
body.smr-track-mode-iframe #bottom .button:not(#instrument-toggle-button):not(#percussion-toggle-button),
html.smr-track-mode-iframe #bottom .clear-button,
body.smr-track-mode-iframe #bottom .clear-button {
  position: relative !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  margin-left: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  width: var(--smr-transport-size, 44px) !important;
  min-width: var(--smr-transport-size, 44px) !important;
  max-width: var(--smr-transport-size, 44px) !important;
  padding: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: var(--smr-transport-size, 44px) !important;
  height: var(--smr-transport-size, 44px) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border-radius: 50% !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  vertical-align: middle !important;
}

html.smr-merged-chrome #bottom .button:not(#instrument-toggle-button):not(#percussion-toggle-button)::before,
body.smr-merged-chrome #bottom .button:not(#instrument-toggle-button):not(#percussion-toggle-button)::before,
html.smr-merged-chrome #bottom .clear-button::before,
body.smr-merged-chrome #bottom .clear-button::before,
html.smr-track-grid-only #bottom .button:not(#instrument-toggle-button):not(#percussion-toggle-button)::before,
body.smr-track-grid-only #bottom .button:not(#instrument-toggle-button):not(#percussion-toggle-button)::before,
html.smr-track-grid-only #bottom .clear-button::before,
body.smr-track-grid-only #bottom .clear-button::before,
html.smr-track-mode-iframe #bottom .button:not(#instrument-toggle-button):not(#percussion-toggle-button)::before,
body.smr-track-mode-iframe #bottom .button:not(#instrument-toggle-button):not(#percussion-toggle-button)::before,
html.smr-track-mode-iframe #bottom .clear-button::before,
body.smr-track-mode-iframe #bottom .clear-button::before {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  transform: none !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  pointer-events: none !important;
  border-radius: 50% !important;
}

html.smr-merged-chrome #bottom #bottom-right #zoom-grid-button,
body.smr-merged-chrome #bottom #bottom-right #zoom-grid-button,
html.smr-track-grid-only #bottom #bottom-right #zoom-grid-button,
body.smr-track-grid-only #bottom #bottom-right #zoom-grid-button,
html.smr-track-mode-iframe #bottom #bottom-right #zoom-grid-button,
body.smr-track-mode-iframe #bottom #bottom-right #zoom-grid-button {
  width: var(--smr-transport-size, 44px) !important;
  min-width: var(--smr-transport-size, 44px) !important;
  max-width: var(--smr-transport-size, 44px) !important;
}

html.smr-merged-chrome #bottom #import-button,
html.smr-merged-chrome #bottom #save-button,
html.smr-merged-chrome #bottom #settings-button,
html.smr-merged-chrome #bottom #undo-button,
html.smr-merged-chrome #bottom #zoom-grid-button,
html.smr-merged-chrome #bottom #downloadmidi-button,
html.smr-merged-chrome #bottom #downloadjson-button,
html.smr-merged-chrome #bottom #downloadwave-button,
body.smr-merged-chrome #bottom #import-button,
body.smr-merged-chrome #bottom #save-button,
body.smr-merged-chrome #bottom #settings-button,
body.smr-merged-chrome #bottom #undo-button,
body.smr-merged-chrome #bottom #zoom-grid-button,
body.smr-merged-chrome #bottom #downloadmidi-button,
body.smr-merged-chrome #bottom #downloadjson-button,
body.smr-merged-chrome #bottom #downloadwave-button,
html.smr-track-grid-only #bottom #import-button,
html.smr-track-grid-only #bottom #save-button,
html.smr-track-grid-only #bottom #settings-button,
html.smr-track-grid-only #bottom #undo-button,
html.smr-track-grid-only #bottom #zoom-grid-button,
body.smr-track-grid-only #bottom #import-button,
body.smr-track-grid-only #bottom #save-button,
body.smr-track-grid-only #bottom #settings-button,
body.smr-track-grid-only #bottom #undo-button,
body.smr-track-grid-only #bottom #zoom-grid-button,
html.smr-track-mode-iframe #bottom #import-button,
html.smr-track-mode-iframe #bottom #save-button,
html.smr-track-mode-iframe #bottom #settings-button,
html.smr-track-mode-iframe #bottom #undo-button,
html.smr-track-mode-iframe #bottom #zoom-grid-button,
body.smr-track-mode-iframe #bottom #import-button,
body.smr-track-mode-iframe #bottom #save-button,
body.smr-track-mode-iframe #bottom #settings-button,
body.smr-track-mode-iframe #bottom #undo-button,
body.smr-track-mode-iframe #bottom #zoom-grid-button {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

html.smr-merged-chrome #play-button,
body.smr-merged-chrome #play-button {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  flex-shrink: 0 !important;
  width: var(--smr-transport-size, 44px) !important;
  height: var(--smr-transport-size, 44px) !important;
  min-width: var(--smr-transport-size, 44px) !important;
  min-height: var(--smr-transport-size, 44px) !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 50% !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 1 !important;
}

html.smr-merged-chrome #bottom #instrument-toggle-button,
html.smr-merged-chrome #bottom #percussion-toggle-button,
body.smr-merged-chrome #bottom #instrument-toggle-button,
body.smr-merged-chrome #bottom #percussion-toggle-button,
html.smr-track-grid-only #bottom #instrument-toggle-button,
html.smr-track-grid-only #bottom #percussion-toggle-button,
body.smr-track-grid-only #bottom #instrument-toggle-button,
body.smr-track-grid-only #bottom #percussion-toggle-button,
html.smr-track-mode-iframe #bottom #instrument-toggle-button,
html.smr-track-mode-iframe #bottom #percussion-toggle-button,
body.smr-track-mode-iframe #bottom #instrument-toggle-button,
body.smr-track-mode-iframe #bottom #percussion-toggle-button {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  flex: 0 1 auto !important;
  flex-direction: row !important;
  width: auto !important;
  min-width: 12ch !important;
  max-width: min(26vw, 184px) !important;
  height: auto !important;
  min-height: 36px !important;
  padding: 2px 8px !important;
  display: flex !important;
  align-items: center !important;
  align-self: center !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  color: var(--smr-text, #eef0f4) !important;
}

html.smr-merged-chrome #bottom #instrument-toggle-button::before,
html.smr-merged-chrome #bottom #percussion-toggle-button::before,
body.smr-merged-chrome #bottom #instrument-toggle-button::before,
body.smr-merged-chrome #bottom #percussion-toggle-button::before,
html.smr-track-grid-only #bottom #instrument-toggle-button::before,
html.smr-track-grid-only #bottom #percussion-toggle-button::before,
body.smr-track-grid-only #bottom #instrument-toggle-button::before,
body.smr-track-grid-only #bottom #percussion-toggle-button::before,
html.smr-track-mode-iframe #bottom #instrument-toggle-button::before,
html.smr-track-mode-iframe #bottom #percussion-toggle-button::before,
body.smr-track-mode-iframe #bottom #instrument-toggle-button::before,
body.smr-track-mode-iframe #bottom #percussion-toggle-button::before {
  display: none !important;
  content: none !important;
  background-image: none !important;
  width: 0 !important;
  height: 0 !important;
}

html.smr-merged-chrome #instrument-toggle-button select,
html.smr-merged-chrome #percussion-toggle-button select,
body.smr-merged-chrome #instrument-toggle-button select,
body.smr-merged-chrome #percussion-toggle-button select,
html.smr-track-grid-only #instrument-toggle-button select,
html.smr-track-grid-only #percussion-toggle-button select,
body.smr-track-grid-only #instrument-toggle-button select,
body.smr-track-grid-only #percussion-toggle-button select,
html.smr-track-mode-iframe #instrument-toggle-button select,
html.smr-track-mode-iframe #percussion-toggle-button select,
body.smr-track-mode-iframe #instrument-toggle-button select,
body.smr-track-mode-iframe #percussion-toggle-button select {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 4px 8px !important;
  min-height: 26px !important;
  height: auto !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
  font-size: 13px !important;
  color: var(--smr-text, #eef0f4) !important;
  appearance: auto !important;
  -webkit-appearance: menulist !important;
}

html.smr-merged-chrome #bottom #zoom-grid-button,
body.smr-merged-chrome #bottom #zoom-grid-button {
  min-width: var(--smr-transport-size, 44px) !important;
  width: var(--smr-transport-size, 44px) !important;
  padding: 0 !important;
  font-size: 0 !important;
  color: transparent !important;
}

  html.smr-merged-chrome #bottom .button:not(#instrument-toggle-button):not(#percussion-toggle-button) span,
  body.smr-merged-chrome #bottom .button:not(#instrument-toggle-button):not(#percussion-toggle-button) span,
  html.smr-track-grid-only #bottom .button:not(#instrument-toggle-button):not(#percussion-toggle-button) span,
  body.smr-track-grid-only #bottom .button:not(#instrument-toggle-button):not(#percussion-toggle-button) span,
  html.smr-track-mode-iframe #bottom .button:not(#instrument-toggle-button):not(#percussion-toggle-button) span,
  body.smr-track-mode-iframe #bottom .button:not(#instrument-toggle-button):not(#percussion-toggle-button) span {
  display: none !important;
}

html.smr-merged-chrome .smr-midi-input-bar,
body.smr-merged-chrome .smr-midi-input-bar {
  display: none !important;
}

@media (max-width: 767px) {
  html.smr-merged-chrome #grid-container,
  body.smr-merged-chrome #grid-container {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
  }
}

/* Grid scrollbars — slim, accent-themed, in gutters outside note cells.
   They are children of #grid-container (already above #bottom). Using
   bottom: var(--smr-bottom-bar-height) lifted them onto percussion/notes.
   Original Main.js bars are 41px with 9px/13px thumb padding; that padding
   overflowed our slim track and covered the last pitch column / drum row. */
html.smr-merged-chrome,
body.smr-merged-chrome,
html.smr-track-grid-only,
body.smr-track-grid-only,
html.smr-track-mode-iframe,
body.smr-track-mode-iframe {
  --smr-grid-scrollbar-size: 12px;
}

html.smr-merged-chrome .scrollbar,
body.smr-merged-chrome .scrollbar,
html.smr-merged-chrome .scrollbar-horizontal,
body.smr-merged-chrome .scrollbar-horizontal,
html.smr-merged-chrome .scrollbar-vertical,
body.smr-merged-chrome .scrollbar-vertical {
  position: absolute !important;
  background: transparent !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  z-index: 2 !important;
  pointer-events: auto !important;
}

html.smr-merged-chrome .scrollbar-vertical,
body.smr-merged-chrome .scrollbar-vertical {
  width: var(--smr-grid-scrollbar-size, 12px) !important;
  right: 0 !important;
  left: auto !important;
  top: 0 !important;
  bottom: 0 !important;
  height: auto !important;
  border-left: none !important;
}

html.smr-merged-chrome .scrollbar-horizontal,
body.smr-merged-chrome .scrollbar-horizontal,
html.smr-merged-chrome body > .scrollbar-horizontal,
body.smr-merged-chrome > .scrollbar-horizontal {
  height: var(--smr-grid-scrollbar-size, 12px) !important;
  left: 0 !important;
  right: var(--smr-grid-scrollbar-size, 12px) !important;
  bottom: 0 !important;
  top: auto !important;
  border-top: none !important;
}

html.smr-merged-chrome .scrollbar-horizontal.scrollbar-full,
body.smr-merged-chrome .scrollbar-horizontal.scrollbar-full {
  right: 0 !important;
}

.scrollbar .scrollbar-track {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border: none !important;
  border-radius: 999px !important;
}

html.smr-merged-chrome .scrollbar-vertical .scrollbar-track,
body.smr-merged-chrome .scrollbar-vertical .scrollbar-track {
  top: 2px !important;
  right: 2px !important;
  bottom: 2px !important;
  left: 2px !important;
}

html.smr-merged-chrome .scrollbar-horizontal .scrollbar-track,
body.smr-merged-chrome .scrollbar-horizontal .scrollbar-track {
  top: 2px !important;
  right: 2px !important;
  bottom: 2px !important;
  left: 2px !important;
}

html.smr-merged-chrome .scrollbar .scrollbar-thumb,
body.smr-merged-chrome .scrollbar .scrollbar-thumb,
html.smr-merged-chrome .scrollbar-horizontal .scrollbar-thumb,
body.smr-merged-chrome .scrollbar-horizontal .scrollbar-thumb,
html.smr-merged-chrome .scrollbar-vertical .scrollbar-thumb,
body.smr-merged-chrome .scrollbar-vertical .scrollbar-thumb {
  background: transparent !important;
  padding: 2px !important;
  box-sizing: border-box !important;
}

html.smr-merged-chrome .scrollbar-horizontal .scrollbar-thumb,
body.smr-merged-chrome .scrollbar-horizontal .scrollbar-thumb {
  height: 100% !important;
  min-width: 32px !important;
  min-height: 0 !important;
}

html.smr-merged-chrome .scrollbar-vertical .scrollbar-thumb,
body.smr-merged-chrome .scrollbar-vertical .scrollbar-thumb {
  width: 100% !important;
  min-height: 32px !important;
  min-width: 0 !important;
}

.scrollbar .scrollbar-thumb:after {
  background-color: var(--smr-accent, var(--editor-accent, var(--sm-accent))) !important;
  border-radius: 999px !important;
}

.scrollbar .scrollbar-thumb:hover:after {
  background-color: var(--smr-accent-dark, color-mix(in srgb, var(--smr-accent, var(--editor-accent, var(--sm-accent))) 72%, #000)) !important;
}

html.smr-merged-chrome #grid-container,
body.smr-merged-chrome #grid-container {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  order: 1 !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  align-self: stretch !important;
  width: 100% !important;
  height: auto !important;
  background-color: var(--smr-bg, #191c25) !important;
  z-index: 1 !important;
  overflow: hidden !important;
}

/* Legacy mix bar (M Mel / S Mel / M Drm / S Drm) — removed from reboot-bridge */
#smr-mix-bar,
#smr-mute-melody,
#smr-solo-melody,
#smr-mute-drums,
#smr-solo-drums {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html.smr-merged-chrome #canvas-container,
body.smr-merged-chrome #canvas-container,
html.smr-merged-chrome #scroll-container,
body.smr-merged-chrome #scroll-container {
  background-color: var(--smr-bg, #191c25) !important;
  overflow: hidden !important;
  scrollbar-width: none !important;
}

html.smr-merged-chrome #canvas-container::-webkit-scrollbar,
body.smr-merged-chrome #canvas-container::-webkit-scrollbar,
html.smr-merged-chrome #scroll-container::-webkit-scrollbar,
body.smr-merged-chrome #scroll-container::-webkit-scrollbar,
html.smr-merged-chrome #grid-container::-webkit-scrollbar,
body.smr-merged-chrome #grid-container::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

html.smr-merged-chrome,
html.smr-track-grid-only,
html.smr-track-mode-iframe {
  background-color: var(--smr-bg, #191c25) !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
  position: relative !important;
}

html.smr-merged-chrome body,
body.smr-merged-chrome,
html.smr-track-grid-only body,
body.smr-track-grid-only,
html.smr-track-mode-iframe body,
body.smr-track-mode-iframe {
  background-color: var(--smr-bg, #191c25) !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  height: 100% !important;
  min-height: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
  position: relative !important;
}

#bottom {
  background-color: transparent !important;
  background-image: linear-gradient(
    180deg,
    var(--smr-bottom-top, var(--smr-bar-bg, #0c0c12)),
    var(--smr-bottom-bottom, var(--smr-bg, #0a0a0f))
  ) !important;
  border-top: 3px solid var(--smr-bottom-border, var(--smr-bar-border, var(--smr-accent, var(--editor-accent, var(--sm-accent))))) !important;
  color: var(--smr-text, #eef0f4);
}

#bottom select,
#bottom .select-wrap,
#bottom .icon-label,
#tempo-slider .label,
#tempo-slider input.input-number,
#instrument-toggle-button,
#percussion-toggle-button,
#instrument-toggle-button select,
#percussion-toggle-button select,
#undo-button,
#reset-button,
#bottom #zoom-grid-button {
  color: var(--smr-muted, #a8abb8) !important;
}

#tempo-slider input.input-number {
  color: var(--smr-link, var(--smr-accent, var(--editor-accent, var(--sm-accent)))) !important;
}

#instrument-toggle-button,
#percussion-toggle-button,
#bottom select,
#instrument-toggle-button select,
#percussion-toggle-button select {
  background: var(--smr-bar-bg, #1f232d) !important;
  border-color: var(--smr-accent, var(--editor-accent, var(--sm-accent))) !important;
  color: var(--smr-muted, #a8abb8) !important;
}

.settings-theme-preview-panel {
  margin-top: 8px;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.settings-custom-theme {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin: 12px 0 4px;
}

.settings-custom-theme label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}

.settings-custom-theme input[type="color"] {
  width: 100%;
  min-height: 40px;
  padding: 2px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: transparent;
  cursor: pointer;
}

/* Play / pause transport — icon on ::before (Main.js bg cleared by reboot-bridge) */
#play-button {
  position: relative !important;
  width: var(--smr-transport-size, 44px) !important;
  height: var(--smr-transport-size, 44px) !important;
  min-width: var(--smr-transport-size, 44px) !important;
  min-height: var(--smr-transport-size, 44px) !important;
  color: transparent !important;
  font-size: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  overflow: hidden !important;
  border-radius: 50% !important;
}

#play-button::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  border-radius: 50% !important;
  background-color: var(--smr-accent, var(--editor-accent, var(--sm-accent))) !important;
  background-image: url("/song-maker/images/icon-btn-play.svg") !important;
  background-size: var(--smr-transport-icon, 42%) var(--smr-transport-icon, 42%) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

#play-button:hover::before {
  background-color: var(--smr-accent-dark, color-mix(in srgb, var(--smr-accent, var(--editor-accent, var(--sm-accent))) 82%, #fff)) !important;
}

#bottom #play-button.playing::before,
#play-button.playing::before {
  background-color: var(--smr-accent-dark, color-mix(in srgb, var(--smr-accent, var(--editor-accent, var(--sm-accent))) 72%, #000)) !important;
  background-image: url("/song-maker/images/icon-btn-pause.svg") !important;
}

html.smr-track-grid-only #play-button,
html.smr-track-grid-only #import-button,
html.smr-track-grid-only #save-button,
html.smr-track-grid-only #zoom-grid-button,
html.smr-track-grid-only #midi-button,
html.smr-track-grid-only #load-button,
body.smr-track-grid-only #play-button,
body.smr-track-grid-only #import-button,
body.smr-track-grid-only #save-button,
body.smr-track-grid-only #zoom-grid-button,
body.smr-track-grid-only #midi-button,
body.smr-track-grid-only #load-button {
  display: none !important;
}

/* Grid-only track cells: sequencer canvas only — no per-panel transport/mixers */
html.smr-track-grid-only #bottom,
html.smr-track-grid-only.smr-track-mode-iframe #bottom,
html.smr-track-grid-only.smr-merged-chrome #bottom,
body.smr-track-grid-only #bottom,
body.smr-track-grid-only.smr-track-mode-iframe #bottom,
body.smr-track-grid-only.smr-merged-chrome #bottom {
  display: none !important;
  visibility: hidden !important;
  min-height: 0 !important;
  height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  overflow: hidden !important;
  pointer-events: none !important;
  flex: 0 0 0 !important;
}

html.smr-track-grid-only #grid-container,
html.smr-track-grid-only.smr-track-mode-iframe #grid-container,
html.smr-track-grid-only.smr-merged-chrome #grid-container,
body.smr-track-grid-only #grid-container,
body.smr-track-grid-only.smr-track-mode-iframe #grid-container,
body.smr-track-grid-only.smr-merged-chrome #grid-container {
  order: 1 !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: 100% !important;
}

html.smr-track-grid-only #gamepad,
body.smr-track-grid-only #gamepad {
  display: none !important;
}

html.smr-track-grid-only .scrollbar,
html.smr-track-grid-only .scrollbar-horizontal,
html.smr-track-grid-only .scrollbar-vertical,
body.smr-track-grid-only .scrollbar,
body.smr-track-grid-only .scrollbar-horizontal,
body.smr-track-grid-only .scrollbar-vertical {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

@media (max-width: 495px) {
  html.smr-merged-chrome #tempo-slider label,
  body.smr-merged-chrome #tempo-slider label {
    font-size: 10px !important;
  }

  html.smr-merged-chrome #tempo-slider .range-cover,
  body.smr-merged-chrome #tempo-slider .range-cover,
  html.smr-merged-chrome .smr-volume-control .range-cover,
  body.smr-merged-chrome .smr-volume-control .range-cover {
    min-width: 0 !important;
  }
}

body.smr-merged-chrome #gamepad label[for="note-repeat"],
body.smr-merged-chrome #note-repeat,
body.smr-merged-chrome #note-offset,
body.smr-merged-chrome label[for="note-offset"] {
  display: none !important;
}

body.smr-merged-chrome #gamepad {
  top: 10px !important;
  left: 10px !important;
}

body.smr-merged-chrome #incompatible {
  top: 0 !important;
  height: 100% !important;
}

.smr-midi-input-bar {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.smr-midi-input-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--smr-muted, #eef0f4);
  font-size: 11px;
  font-weight: 600;
}

.smr-midi-input-label select {
  min-height: 34px;
  border-radius: 8px;
  border: 1px solid var(--smr-border, rgba(255, 255, 255, 0.14));
  background: var(--smr-surface, rgba(0, 0, 0, 0.35));
  color: var(--smr-muted, #eef0f4);
  max-width: 160px;
}

html.smr-track-grid-only .smr-midi-input-bar,
body.smr-track-grid-only .smr-midi-input-bar {
  display: none !important;
}

html.smr-track-mode-iframe #edit-link,
body.smr-track-mode-iframe #edit-link,
.track-mode-root #edit-link {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html.smr-track-mode-iframe #import-button,
html.smr-track-mode-iframe #midi-button,
html.smr-track-mode-iframe #play-button,
html.smr-track-mode-iframe #save-button,
html.smr-track-mode-iframe #zoom-grid-button,
html.smr-track-mode-iframe #load-button,
html.smr-track-mode-iframe .smr-midi-input-bar,
html.smr-track-mode-iframe #smr-midi-modal,
html.smr-track-mode-iframe #smr-png-modal,
body.smr-track-mode-iframe #import-button,
body.smr-track-mode-iframe #midi-button,
body.smr-track-mode-iframe #play-button,
body.smr-track-mode-iframe #save-button,
body.smr-track-mode-iframe #zoom-grid-button,
body.smr-track-mode-iframe #load-button,
body.smr-track-mode-iframe .smr-midi-input-bar,
body.smr-track-mode-iframe #smr-midi-modal,
body.smr-track-mode-iframe #smr-png-modal,
body.smr-track-mode-iframe.smr-drag-midi::after {
  display: none !important;
}

html.smr-track-mode-iframe:not(.smr-track-grid-only) #bottom,
body.smr-track-mode-iframe:not(.smr-track-grid-only) #bottom {
  display: grid !important;
  align-items: stretch !important;
  overflow: visible !important;
  padding-top: 10px !important;
  padding-bottom: var(--smr-bottom-pad, 16px) !important;
}

html.smr-track-mode-iframe #grid-container,
body.smr-track-mode-iframe #grid-container {
  order: 1 !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
}

html.smr-merged-chrome #midi-button,
html.smr-merged-chrome #reset-button,
html.smr-merged-chrome #meter-button,
body.smr-merged-chrome #midi-button,
body.smr-merged-chrome #reset-button,
body.smr-merged-chrome #meter-button {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.smr-track-mode-iframe.smr-drag-midi::after {
  content: none !important;
}

/* ---------------------------------------------------------------------------
   Round transport controls: one diameter for play / import / save / settings /
   undo. Box metrics live here (last in the sheet and three IDs deep, so the
   generic .button rules above cannot outrank them); reboot-bridge.js only
   paints the colours and glyphs on top.
   --------------------------------------------------------------------------- */
html.smr-merged-chrome #bottom #bottom-left #play-button,
body.smr-merged-chrome #bottom #bottom-left #play-button,
html.smr-merged-chrome #bottom #bottom-right #import-button,
body.smr-merged-chrome #bottom #bottom-right #import-button,
html.smr-merged-chrome #bottom #bottom-right #save-button,
body.smr-merged-chrome #bottom #bottom-right #save-button,
html.smr-merged-chrome #bottom #bottom-right #settings-button,
body.smr-merged-chrome #bottom #bottom-right #settings-button,
html.smr-merged-chrome #bottom #bottom-right #undo-button,
body.smr-merged-chrome #bottom #bottom-right #undo-button,
html.smr-merged-chrome #bottom #bottom-right #zoom-grid-button,
body.smr-merged-chrome #bottom #bottom-right #zoom-grid-button,
html.smr-track-mode-iframe #bottom #bottom-left #play-button,
body.smr-track-mode-iframe #bottom #bottom-left #play-button,
html.smr-track-mode-iframe #bottom #bottom-right #settings-button,
body.smr-track-mode-iframe #bottom #bottom-right #settings-button,
html.smr-track-mode-iframe #bottom #bottom-right #undo-button,
body.smr-track-mode-iframe #bottom #bottom-right #undo-button {
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  align-self: center !important;
  width: var(--smr-transport-size, 44px) !important;
  min-width: var(--smr-transport-size, 44px) !important;
  max-width: var(--smr-transport-size, 44px) !important;
  height: var(--smr-transport-size, 44px) !important;
  min-height: var(--smr-transport-size, 44px) !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0 !important;
  color: transparent !important;
  overflow: hidden !important;
  border-radius: 50% !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 1 !important;
}

html.smr-merged-chrome #bottom #bottom-left #play-button::before,
body.smr-merged-chrome #bottom #bottom-left #play-button::before,
html.smr-merged-chrome #bottom #bottom-right #import-button::before,
body.smr-merged-chrome #bottom #bottom-right #import-button::before,
html.smr-merged-chrome #bottom #bottom-right #save-button::before,
body.smr-merged-chrome #bottom #bottom-right #save-button::before,
html.smr-merged-chrome #bottom #bottom-right #settings-button::before,
body.smr-merged-chrome #bottom #bottom-right #settings-button::before,
html.smr-merged-chrome #bottom #bottom-right #undo-button::before,
body.smr-merged-chrome #bottom #bottom-right #undo-button::before,
html.smr-merged-chrome #bottom #bottom-right #zoom-grid-button::before,
body.smr-merged-chrome #bottom #bottom-right #zoom-grid-button::before {
  display: block !important;
  content: "" !important;
  box-sizing: border-box !important;
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  transform: none !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: var(--smr-transport-icon, 42%) var(--smr-transport-icon, 42%) !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  filter: none !important;
  -webkit-filter: none !important;
}

html.smr-merged-chrome #bottom #bottom-left #play-button::before,
body.smr-merged-chrome #bottom #bottom-left #play-button::before {
  background-color: var(--smr-accent, var(--editor-accent, var(--sm-accent))) !important;
  background-image: url("/song-maker/images/icon-btn-play.svg") !important;
  border: none !important;
}

html.smr-merged-chrome #bottom #bottom-left #play-button.playing::before,
body.smr-merged-chrome #bottom #bottom-left #play-button.playing::before {
  background-image: url("/song-maker/images/icon-btn-pause.svg") !important;
}

html.smr-merged-chrome #bottom #bottom-right #import-button::before,
body.smr-merged-chrome #bottom #bottom-right #import-button::before,
html.smr-merged-chrome #bottom #bottom-right #save-button::before,
body.smr-merged-chrome #bottom #bottom-right #save-button::before,
html.smr-merged-chrome #bottom #bottom-right #settings-button::before,
body.smr-merged-chrome #bottom #bottom-right #settings-button::before,
html.smr-merged-chrome #bottom #bottom-right #undo-button::before,
body.smr-merged-chrome #bottom #bottom-right #undo-button::before,
html.smr-merged-chrome #bottom #bottom-right #zoom-grid-button::before,
body.smr-merged-chrome #bottom #bottom-right #zoom-grid-button::before {
  background-color: rgba(0, 0, 0, 0.38) !important;
  border: 2px solid rgba(255, 255, 255, 0.18) !important;
}

html.smr-merged-chrome #bottom #bottom-right #save-button::before,
body.smr-merged-chrome #bottom #bottom-right #save-button::before {
  background-image: url("/song-maker/images/icon-btn-save.svg") !important;
}

html.smr-merged-chrome #bottom #bottom-right #import-button::before,
body.smr-merged-chrome #bottom #bottom-right #import-button::before {
  background-image: url("/song-maker/images/icon-btn-import.svg") !important;
}

html.smr-merged-chrome #bottom #bottom-right #settings-button::before,
body.smr-merged-chrome #bottom #bottom-right #settings-button::before {
  background-image: url("/song-maker/images/icon-btn-settings.svg") !important;
}

html.smr-merged-chrome #bottom #bottom-right #undo-button::before,
body.smr-merged-chrome #bottom #bottom-right #undo-button::before {
  background-image: url("/song-maker/images/icon-btn-undo.svg") !important;
}

html.smr-merged-chrome #bottom #bottom-right #zoom-grid-button,
body.smr-merged-chrome #bottom #bottom-right #zoom-grid-button {
  height: var(--smr-transport-size, 44px) !important;
  min-height: var(--smr-transport-size, 44px) !important;
  width: var(--smr-transport-size, 44px) !important;
  min-width: var(--smr-transport-size, 44px) !important;
  max-width: var(--smr-transport-size, 44px) !important;
  align-self: center !important;
  padding: 0 !important;
  font-size: 0 !important;
  color: transparent !important;
  overflow: hidden !important;
  border-radius: 50% !important;
}

/* Narrow viewports: drop the words, keep the numbers, so the sliders stay
   wide enough to drag. */
@media (max-width: 720px) {
  html.smr-merged-chrome #tempo-slider label,
  body.smr-merged-chrome #tempo-slider label,
  html.smr-track-grid-only #tempo-slider label,
  body.smr-track-grid-only #tempo-slider label,
  html.smr-track-mode-iframe #tempo-slider label,
  body.smr-track-mode-iframe #tempo-slider label,
  .smr-volume-control label {
    display: none !important;
  }
}

/* Tempo/Volume: one 16px painted thumb on .range-dupe::before.
   Native thumbs stay a real (invisible) hit target — Chrome needs a sized
   ::-webkit-slider-thumb or the range will not drag. Never group webkit/moz
   thumbs in one rule. Overlay paint uses pointer-events:none so the native
   input on z-index 3 receives the drag. */
html.smr-merged-chrome #tempo-slider .range-cover::before,
body.smr-merged-chrome #tempo-slider .range-cover::before,
html.smr-track-grid-only #tempo-slider .range-cover::before,
body.smr-track-grid-only #tempo-slider .range-cover::before,
html.smr-track-mode-iframe #tempo-slider .range-cover::before,
body.smr-track-mode-iframe #tempo-slider .range-cover::before,
html.smr-merged-chrome .smr-volume-control .range-cover::before,
body.smr-merged-chrome .smr-volume-control .range-cover::before,
html.smr-track-grid-only .smr-volume-control .range-cover::before,
body.smr-track-grid-only .smr-volume-control .range-cover::before,
html.smr-track-mode-iframe .smr-volume-control .range-cover::before,
body.smr-track-mode-iframe .smr-volume-control .range-cover::before {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  width: 100% !important;
  height: var(--smr-slider-track, 6px) !important;
  transform: translateY(-50%) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.14) !important;
  content: "" !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

html.smr-merged-chrome #tempo-slider .range-dupe,
body.smr-merged-chrome #tempo-slider .range-dupe,
html.smr-track-grid-only #tempo-slider .range-dupe,
body.smr-track-grid-only #tempo-slider .range-dupe,
html.smr-track-mode-iframe #tempo-slider .range-dupe,
body.smr-track-mode-iframe #tempo-slider .range-dupe,
html.smr-merged-chrome .smr-volume-control .range-dupe,
body.smr-merged-chrome .smr-volume-control .range-dupe,
html.smr-track-grid-only .smr-volume-control .range-dupe,
body.smr-track-grid-only .smr-volume-control .range-dupe,
html.smr-track-mode-iframe .smr-volume-control .range-dupe,
body.smr-track-mode-iframe .smr-volume-control .range-dupe {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  bottom: auto !important;
  height: var(--smr-slider-track, 6px) !important;
  transform: translateY(-50%) !important;
  border-radius: 999px !important;
  pointer-events: none !important;
  z-index: 1 !important;
  overflow: visible !important;
}

html.smr-merged-chrome #tempo-slider .range-dupe::before,
body.smr-merged-chrome #tempo-slider .range-dupe::before,
html.smr-track-grid-only #tempo-slider .range-dupe::before,
body.smr-track-grid-only #tempo-slider .range-dupe::before,
html.smr-track-mode-iframe #tempo-slider .range-dupe::before,
body.smr-track-mode-iframe #tempo-slider .range-dupe::before,
html.smr-merged-chrome .smr-volume-control .range-dupe::before,
body.smr-merged-chrome .smr-volume-control .range-dupe::before,
html.smr-track-grid-only .smr-volume-control .range-dupe::before,
body.smr-track-grid-only .smr-volume-control .range-dupe::before,
html.smr-track-mode-iframe .smr-volume-control .range-dupe::before,
body.smr-track-mode-iframe .smr-volume-control .range-dupe::before {
  position: absolute !important;
  right: calc(var(--smr-slider-thumb, 16px) / -2) !important;
  top: 50% !important;
  left: auto !important;
  bottom: auto !important;
  width: var(--smr-slider-thumb, 16px) !important;
  height: var(--smr-slider-thumb, 16px) !important;
  transform: translateY(-50%) !important;
  border-radius: 50% !important;
  background: var(--smr-accent, var(--editor-accent, var(--sm-accent))) !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85) !important;
  content: "" !important;
  pointer-events: none !important;
}

html.smr-merged-chrome #tempo,
html.smr-merged-chrome #tempo-slider .range-cover [type="range"],
body.smr-merged-chrome #tempo,
body.smr-merged-chrome #tempo-slider .range-cover [type="range"],
html.smr-track-grid-only #tempo,
html.smr-track-grid-only #tempo-slider .range-cover [type="range"],
body.smr-track-grid-only #tempo,
body.smr-track-grid-only #tempo-slider .range-cover [type="range"],
html.smr-track-mode-iframe #tempo,
html.smr-track-mode-iframe #tempo-slider .range-cover [type="range"],
body.smr-track-mode-iframe #tempo,
body.smr-track-mode-iframe #tempo-slider .range-cover [type="range"],
html.smr-merged-chrome .smr-volume-control [type="range"],
body.smr-merged-chrome .smr-volume-control [type="range"],
html.smr-track-grid-only .smr-volume-control [type="range"],
body.smr-track-grid-only .smr-volume-control [type="range"],
html.smr-track-mode-iframe .smr-volume-control [type="range"],
body.smr-track-mode-iframe .smr-volume-control [type="range"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: var(--smr-slider-height, 28px) !important;
  margin: 0 !important;
  background: transparent !important;
  opacity: 0 !important;
  cursor: pointer !important;
  z-index: 3 !important;
  pointer-events: auto !important;
}

html.smr-merged-chrome .range-cover [type="range"]::-webkit-slider-thumb,
body.smr-merged-chrome .range-cover [type="range"]::-webkit-slider-thumb,
html.smr-track-grid-only .range-cover [type="range"]::-webkit-slider-thumb,
body.smr-track-grid-only .range-cover [type="range"]::-webkit-slider-thumb,
html.smr-track-mode-iframe .range-cover [type="range"]::-webkit-slider-thumb,
body.smr-track-mode-iframe .range-cover [type="range"]::-webkit-slider-thumb,
html.smr-merged-chrome .smr-volume-control [type="range"]::-webkit-slider-thumb,
body.smr-merged-chrome .smr-volume-control [type="range"]::-webkit-slider-thumb,
html.smr-merged-chrome #settings-modal [type="range"]::-webkit-slider-thumb,
body.smr-merged-chrome #settings-modal [type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: block !important;
  width: var(--smr-slider-thumb, 16px) !important;
  height: var(--smr-slider-height, 28px) !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  opacity: 0 !important;
  pointer-events: auto !important;
}

html.smr-merged-chrome .range-cover [type="range"]::-moz-range-thumb,
body.smr-merged-chrome .range-cover [type="range"]::-moz-range-thumb,
html.smr-track-grid-only .range-cover [type="range"]::-moz-range-thumb,
body.smr-track-grid-only .range-cover [type="range"]::-moz-range-thumb,
html.smr-track-mode-iframe .range-cover [type="range"]::-moz-range-thumb,
body.smr-track-mode-iframe .range-cover [type="range"]::-moz-range-thumb,
html.smr-merged-chrome .smr-volume-control [type="range"]::-moz-range-thumb,
body.smr-merged-chrome .smr-volume-control [type="range"]::-moz-range-thumb,
html.smr-merged-chrome #settings-modal [type="range"]::-moz-range-thumb,
body.smr-merged-chrome #settings-modal [type="range"]::-moz-range-thumb {
  appearance: none !important;
  display: block !important;
  width: var(--smr-slider-thumb, 16px) !important;
  height: var(--smr-slider-height, 28px) !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  opacity: 0 !important;
  pointer-events: auto !important;
}

html.smr-merged-chrome .range-cover [type="range"]::-ms-thumb,
body.smr-merged-chrome .range-cover [type="range"]::-ms-thumb,
html.smr-track-grid-only .range-cover [type="range"]::-ms-thumb,
body.smr-track-grid-only .range-cover [type="range"]::-ms-thumb,
html.smr-track-mode-iframe .range-cover [type="range"]::-ms-thumb,
body.smr-track-mode-iframe .range-cover [type="range"]::-ms-thumb,
html.smr-merged-chrome .smr-volume-control [type="range"]::-ms-thumb,
body.smr-merged-chrome .smr-volume-control [type="range"]::-ms-thumb,
html.smr-merged-chrome #settings-modal [type="range"]::-ms-thumb,
body.smr-merged-chrome #settings-modal [type="range"]::-ms-thumb {
  display: block !important;
  width: var(--smr-slider-thumb, 16px) !important;
  height: var(--smr-slider-height, 28px) !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  opacity: 0 !important;
  pointer-events: auto !important;
}

html.smr-merged-chrome #tempo-slider .slider-handle,
body.smr-merged-chrome #tempo-slider .slider-handle,
html.smr-merged-chrome #tempo-slider .slider-handle:after,
body.smr-merged-chrome #tempo-slider .slider-handle:after {
  display: none !important;
}

html.smr-merged-chrome #bottom #bottom-right #zoom-grid-button::before,
body.smr-merged-chrome #bottom #bottom-right #zoom-grid-button::before {
  background-image: url("/song-maker/images/icon-btn-zoom.svg") !important;
}

html.smr-merged-chrome #bottom #bottom-right #zoom-grid-button.active::before,
body.smr-merged-chrome #bottom #bottom-right #zoom-grid-button.active::before {
  background-color: color-mix(
    in srgb,
    var(--smr-accent, var(--editor-accent, var(--sm-accent))) 85%,
    #000
  ) !important;
  border-color: var(--smr-accent, var(--editor-accent, var(--sm-accent))) !important;
  box-shadow: 0 0 0 1px var(--smr-accent, var(--editor-accent, var(--sm-accent))) !important;
}

html.smr-merged-chrome #grid-container #canvas-container,
body.smr-merged-chrome #grid-container #canvas-container {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  height: auto !important;
  z-index: 1 !important;
}

html.smr-merged-chrome .scrollbar,
body.smr-merged-chrome .scrollbar,
html.smr-merged-chrome .scrollbar-horizontal,
body.smr-merged-chrome .scrollbar-horizontal,
html.smr-merged-chrome .scrollbar-vertical,
body.smr-merged-chrome .scrollbar-vertical {
  z-index: 2 !important;
}

/* Keep custom bars in the grid gutters (bottom:0 / right:0 of #grid-container). */
html.smr-merged-chrome body > .scrollbar-horizontal,
body.smr-merged-chrome > .scrollbar-horizontal,
html.smr-merged-chrome body > .scrollbar-vertical,
body.smr-merged-chrome > .scrollbar-vertical {
  position: absolute !important;
}

html.smr-merged-chrome #bottom #play-button.playing::before,
body.smr-merged-chrome #bottom #play-button.playing::before,
html.smr-merged-chrome #play-button.playing::before,
body.smr-merged-chrome #play-button.playing::before {
  background-image: url("/song-maker/images/icon-btn-pause.svg") !important;
}

/* Track Mode parent footer: Play must match import / save / + diameter.
   Generic #play-button { 44px !important } is Basic merged-chrome only. */
.track-mode-root #bottom.track-mode-bottom #play-button,
.track-mode-root #bottom.track-mode-bottom #play-button.button,
.track-mode-root #bottom.track-mode-bottom #play-button.clear-button {
  box-sizing: border-box !important;
  width: clamp(52px, 10vmin, 80px) !important;
  min-width: clamp(52px, 10vmin, 80px) !important;
  max-width: none !important;
  height: clamp(52px, 10vmin, 80px) !important;
  min-height: clamp(52px, 10vmin, 80px) !important;
  max-height: none !important;
  padding: 0 !important;
}

.track-mode-root #bottom.track-mode-bottom #play-button::before {
  background-size: 44% !important;
}

.track-mode-root .track-grid-toggle {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   Compact chrome (phones + short landscape): kill Song Maker's vw-absolute
   #bottom .button layout, stack Play/dropdowns, circle row, then sliders.
   Breakpoints: 960px (iPhone landscape ~844), 720px (Track 1-col), 520px height.
   Original Main.js uses 767px / 495px with left: 36vw/53vw/70vw overlays.
   --------------------------------------------------------------------------- */
html.smr-merged-chrome #bottom .button,
body.smr-merged-chrome #bottom .button,
html.smr-merged-chrome #bottom .clear-button,
body.smr-merged-chrome #bottom .clear-button,
html.smr-track-grid-only #bottom .button,
body.smr-track-grid-only #bottom .button,
html.smr-track-mode-iframe #bottom .button,
body.smr-track-mode-iframe #bottom .button,
html.smr-merged-chrome #play-button,
body.smr-merged-chrome #play-button,
html.smr-merged-chrome #save-button,
html.smr-merged-chrome #settings-button,
html.smr-merged-chrome #undo-button,
html.smr-merged-chrome #import-button,
html.smr-merged-chrome #zoom-grid-button,
html.smr-merged-chrome #instrument-toggle-button,
html.smr-merged-chrome #percussion-toggle-button,
body.smr-merged-chrome #save-button,
body.smr-merged-chrome #settings-button,
body.smr-merged-chrome #undo-button,
body.smr-merged-chrome #import-button,
body.smr-merged-chrome #zoom-grid-button,
body.smr-merged-chrome #instrument-toggle-button,
body.smr-merged-chrome #percussion-toggle-button,
html.smr-track-mode-iframe #settings-button,
html.smr-track-mode-iframe #undo-button,
html.smr-track-mode-iframe #instrument-toggle-button,
html.smr-track-mode-iframe #percussion-toggle-button,
body.smr-track-mode-iframe #settings-button,
body.smr-track-mode-iframe #undo-button,
body.smr-track-mode-iframe #instrument-toggle-button,
body.smr-track-mode-iframe #percussion-toggle-button {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  float: none !important;
}

@media (max-width: 960px), (max-height: 520px) {
  html.smr-merged-chrome:not(.smr-track-grid-only) #bottom,
  body.smr-merged-chrome:not(.smr-track-grid-only) #bottom,
  html.smr-track-mode-iframe:not(.smr-track-grid-only) #bottom,
  body.smr-track-mode-iframe:not(.smr-track-grid-only) #bottom,
  html.smr-compact-chrome:not(.smr-track-grid-only) #bottom,
  body.smr-compact-chrome:not(.smr-track-grid-only) #bottom {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "left"
      "right"
      "center" !important;
    row-gap: 8px !important;
    column-gap: 8px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    padding: 8px 10px var(--smr-bottom-pad, 16px) !important;
    overflow: visible !important;
    align-items: stretch !important;
  }

  html.smr-merged-chrome #bottom-left,
  body.smr-merged-chrome #bottom-left,
  html.smr-track-grid-only #bottom-left,
  body.smr-track-grid-only #bottom-left,
  html.smr-track-mode-iframe #bottom-left,
  body.smr-track-mode-iframe #bottom-left,
  html.smr-merged-chrome #bottom-right,
  body.smr-merged-chrome #bottom-right,
  html.smr-track-grid-only #bottom-right,
  body.smr-track-grid-only #bottom-right,
  html.smr-track-mode-iframe #bottom-right,
  body.smr-track-mode-iframe #bottom-right {
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    row-gap: 8px !important;
  }

  html.smr-merged-chrome #bottom-center,
  body.smr-merged-chrome #bottom-center,
  html.smr-track-grid-only #bottom-center,
  body.smr-track-grid-only #bottom-center,
  html.smr-track-mode-iframe #bottom-center,
  body.smr-track-mode-iframe #bottom-center {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 2px 0 10px !important;
  }

  html.smr-merged-chrome #bottom #instrument-toggle-button,
  html.smr-merged-chrome #bottom #percussion-toggle-button,
  body.smr-merged-chrome #bottom #instrument-toggle-button,
  body.smr-merged-chrome #bottom #percussion-toggle-button,
  html.smr-track-mode-iframe #bottom #instrument-toggle-button,
  html.smr-track-mode-iframe #bottom #percussion-toggle-button,
  body.smr-track-mode-iframe #bottom #instrument-toggle-button,
  body.smr-track-mode-iframe #bottom #percussion-toggle-button {
    flex: 1 1 12ch !important;
    min-width: 10ch !important;
    max-width: 100% !important;
    z-index: 3 !important;
  }

  html.smr-merged-chrome #bottom .button:not(#instrument-toggle-button):not(#percussion-toggle-button),
  body.smr-merged-chrome #bottom .button:not(#instrument-toggle-button):not(#percussion-toggle-button),
  html.smr-track-mode-iframe #bottom .button:not(#instrument-toggle-button):not(#percussion-toggle-button),
  body.smr-track-mode-iframe #bottom .button:not(#instrument-toggle-button):not(#percussion-toggle-button),
  html.smr-merged-chrome #bottom .clear-button,
  body.smr-merged-chrome #bottom .clear-button {
    display: inline-flex !important;
    flex: 0 0 var(--smr-transport-size, 44px) !important;
    z-index: 1 !important;
  }

  html.smr-merged-chrome #tempo-slider .range-cover,
  body.smr-merged-chrome #tempo-slider .range-cover,
  html.smr-track-mode-iframe #tempo-slider .range-cover,
  body.smr-track-mode-iframe #tempo-slider .range-cover,
  html.smr-merged-chrome .smr-volume-control .range-cover,
  body.smr-merged-chrome .smr-volume-control .range-cover,
  html.smr-track-mode-iframe .smr-volume-control .range-cover,
  body.smr-track-mode-iframe .smr-volume-control .range-cover {
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  html.smr-merged-chrome #bottom,
  body.smr-merged-chrome #bottom,
  html.smr-track-mode-iframe #bottom,
  body.smr-track-mode-iframe #bottom {
    padding: 6px 8px max(8px, calc(6px + env(safe-area-inset-bottom, 0px))) !important;
    row-gap: 6px !important;
  }

  html.smr-merged-chrome #bottom-center,
  body.smr-merged-chrome #bottom-center,
  html.smr-track-mode-iframe #bottom-center,
  body.smr-track-mode-iframe #bottom-center {
    padding-bottom: 8px !important;
  }
}

/* Short phone landscapes must leave the majority of the iframe for the grid. */
@media (max-height: 500px) and (orientation: landscape) {
  :root.smr-device-mobile {
    --smr-bottom-bar-height: 88px;
    --smr-transport-size: 34px;
    --smr-transport-icon: 38%;
    --smr-slider-track: 4px;
    --smr-slider-thumb: 14px;
    --smr-slider-height: 20px;
    --smr-slider-font: 10px;
    --smr-slider-label: 44px;
    --smr-slider-value: 38px;
    --smr-bottom-pad: max(4px, env(safe-area-inset-bottom, 0px));
  }

  html.smr-device-mobile.smr-merged-chrome:not(.smr-track-grid-only) #bottom,
  html.smr-device-mobile.smr-track-mode-iframe:not(.smr-track-grid-only) #bottom {
    grid-template-columns: minmax(210px, 1fr) minmax(180px, 270px) minmax(100px, auto) !important;
    grid-template-areas: "left center right" !important;
    column-gap: 5px !important;
    row-gap: 2px !important;
    min-height: var(--smr-bottom-bar-height) !important;
    padding: 3px 6px var(--smr-bottom-pad) !important;
    overflow: hidden !important;
  }

  html.smr-device-mobile #bottom-left,
  html.smr-device-mobile #bottom-right {
    width: auto !important;
    max-width: none !important;
    flex-wrap: wrap !important;
    gap: 3px !important;
    row-gap: 3px !important;
  }

  html.smr-device-mobile #bottom-center {
    grid-auto-rows: minmax(var(--smr-slider-height), auto) !important;
    column-gap: 4px !important;
    row-gap: 2px !important;
    padding: 0 !important;
  }

  html.smr-device-mobile #bottom #instrument-toggle-button,
  html.smr-device-mobile #bottom #percussion-toggle-button {
    min-width: 8ch !important;
    max-width: 126px !important;
    min-height: 28px !important;
    padding: 1px 4px !important;
    font-size: 11px !important;
  }

  html.smr-device-mobile #instrument-toggle-button select,
  html.smr-device-mobile #percussion-toggle-button select {
    min-height: 24px !important;
    padding: 2px 4px !important;
    font-size: 11px !important;
  }

  html.smr-device-mobile #downloadmidi-button,
  html.smr-device-mobile #downloadjson-button,
  html.smr-device-mobile #downloadwave-button {
    display: none !important;
  }

  html.smr-device-mobile #grid-container {
    flex: 1 1 0% !important;
    min-height: 120px !important;
  }
}

.smr-playback-start-control {
  display: inline-flex !important;
  visibility: visible !important;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--smr-muted, #cbd5e1);
  font-size: 12px;
  line-height: 1.2;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  cursor: default;
  user-select: none;
}

.smr-playback-start-control.is-armed {
  background: rgba(96, 165, 250, 0.22);
  border-color: var(--smr-link, #60a5fa);
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.35);
  cursor: pointer;
}

html.smr-merged-chrome #bottom-left .smr-playback-start-control,
body.smr-merged-chrome #bottom-left .smr-playback-start-control,
html.smr-track-mode-iframe #bottom-left .smr-playback-start-control,
body.smr-track-mode-iframe #bottom-left .smr-playback-start-control {
  align-self: center;
  margin-left: 2px;
}

.smr-playback-start-label {
  font-weight: 600;
  white-space: nowrap;
}

.smr-playback-start-col {
  width: 100%;
  min-height: 28px;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.25);
  color: var(--smr-link, #93c5fd);
}

.smr-playback-start-hint,
.smr-playback-start-cursor,
.smr-playback-start-note {
  display: none !important;
}

html.smr-set-start-from-note-armed #grid-container,
body.smr-set-start-from-note-armed #grid-container {
  outline: 2px solid rgba(96, 165, 250, 0.45);
  outline-offset: -2px;
}

#grid-container {
  position: relative;
}

.smr-playback-start-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--smr-link, #60a5fa);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 0 8px rgba(96, 165, 250, 0.55);
  pointer-events: none;
  z-index: 4;
}

/* Last-wins grid-mode pane: hide leftover transport/scroll chrome so every
   nested editor computes tile size from the same full pane box. */
html.smr-track-grid-only #bottom,
html.smr-track-grid-only.smr-track-mode-iframe #bottom,
html.smr-track-grid-only.smr-merged-chrome #bottom,
html.smr-track-grid-only.smr-zoom-grid-out #bottom,
body.smr-track-grid-only #bottom,
body.smr-track-grid-only.smr-track-mode-iframe #bottom,
body.smr-track-grid-only.smr-merged-chrome #bottom,
body.smr-track-grid-only.smr-zoom-grid-out #bottom {
  display: none !important;
  visibility: hidden !important;
  min-height: 0 !important;
  height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  overflow: hidden !important;
  pointer-events: none !important;
  flex: 0 0 0 !important;
}

html.smr-track-grid-only #grid-container,
html.smr-track-grid-only.smr-track-mode-iframe #grid-container,
html.smr-track-grid-only.smr-merged-chrome #grid-container,
body.smr-track-grid-only #grid-container,
body.smr-track-grid-only.smr-track-mode-iframe #grid-container,
body.smr-track-grid-only.smr-merged-chrome #grid-container {
  flex: 1 1 0% !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
}

html.smr-track-grid-only .scrollbar,
html.smr-track-grid-only .scrollbar-horizontal,
html.smr-track-grid-only .scrollbar-vertical,
body.smr-track-grid-only .scrollbar,
body.smr-track-grid-only .scrollbar-horizontal,
body.smr-track-grid-only .scrollbar-vertical {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}