/* ═══════════════════════════════════════════════════════════════
   MUSIC STUDIO 🎹  (owned by music.js)
   ═══════════════════════════════════════════════════════════════ */
#music-studio-root {
  --mz-cell: rgba(255, 255, 255, 0.07);
  --mz-cell-alt: rgba(255, 255, 255, 0.035);
  --mz-cell-hover: rgba(255, 255, 255, 0.16);
  --mz-ctl: rgba(255, 255, 255, 0.06);
  --mz-ctl-hover: rgba(255, 255, 255, 0.12);
  --mz-solid: #171a2c;
  --mz-lw: 118px;
  --mz-cw: 34px;
  --mz-ch: 30px;
  --mz-gap: 3px;
  position: relative;
}
[data-theme="light"] #music-studio-root {
  --mz-cell: rgba(15, 23, 42, 0.07);
  --mz-cell-alt: rgba(15, 23, 42, 0.035);
  --mz-cell-hover: rgba(15, 23, 42, 0.16);
  --mz-ctl: rgba(15, 23, 42, 0.05);
  --mz-ctl-hover: rgba(15, 23, 42, 0.1);
  --mz-solid: #ffffff;
}
#music-section .view-header { margin-bottom: 24px; }

.mz-app { display: flex; flex-direction: column; gap: 16px; position: relative; font-family: var(--font-body); color: var(--text-main); }
.mz-app button { font-family: var(--font-display); color: inherit; }
.mz-app :focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

.mz-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 24px;
  padding: 16px 18px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  min-width: 0;
}
.mz-mini-h { font-family: var(--font-display); font-weight: 700; font-size: 1rem; margin-bottom: 10px; color: var(--text-main); }
.mz-hint { font-family: var(--font-body); font-weight: 400; font-size: 0.82rem; color: var(--text-faint); margin-left: 6px; }
.mz-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.mz-row + .mz-row { margin-top: 10px; }
.mz-flex { flex: 1 1 auto; }

/* generic buttons */
.mz-btn {
  background: var(--mz-ctl); border: 1px solid var(--border-color); border-radius: 14px;
  padding: 9px 14px; font-size: 0.95rem; font-weight: 600; cursor: pointer;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  white-space: nowrap; line-height: 1.2;
}
.mz-btn:hover:not(:disabled) { background: var(--mz-ctl-hover); border-color: var(--border-hover); transform: translateY(-1px); }
.mz-btn:active:not(:disabled) { transform: translateY(1px); }
.mz-btn:disabled { opacity: 0.4; cursor: default; }
.mz-btn.mz-sm { padding: 7px 11px; font-size: 0.88rem; border-radius: 12px; }
.mz-btn.mz-primary { background: var(--grad-main); color: #fff; border-color: transparent; box-shadow: 0 6px 18px rgba(139, 92, 246, 0.3); }
.mz-btn.mz-primary:hover:not(:disabled) { background: var(--grad-main); box-shadow: 0 10px 24px rgba(139, 92, 246, 0.45); }
.mz-btn.mz-movie { background: linear-gradient(135deg, #f59e0b, #ec4899); box-shadow: 0 6px 18px rgba(236, 72, 153, 0.3); }
.mz-btn.mz-movie:hover:not(:disabled) { background: linear-gradient(135deg, #f59e0b, #ec4899); }
.mz-btn.mz-danger.confirm { background: var(--danger); color: #fff; border-color: transparent; }
.mz-btn.active { background: var(--primary); color: #fff; border-color: transparent; }

.mz-select { padding: 8px 12px; font-size: 0.95rem; border-radius: 12px; max-width: 100%; }
.mz-select option { background: var(--mz-solid); color: var(--text-main); }
.mz-sel-sm { padding: 6px 10px; font-size: 0.88rem; }
.mz-input {
  flex: 1 1 160px; min-width: 0; background: var(--mz-ctl); border: 1px solid var(--border-color); color: var(--text-main);
  border-radius: 12px; padding: 9px 12px; font-family: var(--font-display); font-weight: 600; font-size: 1rem; outline: none;
}
.mz-input:focus { border-color: var(--primary); }

/* segmented */
.mz-seg { display: inline-flex; background: var(--mz-ctl); border: 1px solid var(--border-color); border-radius: 14px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.mz-seg button { background: transparent; border: none; padding: 8px 12px; border-radius: 11px; font-weight: 600; font-size: 0.92rem; cursor: pointer; transition: background .2s ease, color .2s ease; white-space: nowrap; }
.mz-seg button:hover { background: var(--mz-ctl-hover); }
.mz-seg button.active { background: var(--grad-main); color: #fff; box-shadow: 0 3px 10px rgba(139, 92, 246, 0.35); }
.mz-seg-sm button { padding: 6px 10px; font-size: 0.86rem; }
.mz-seg-xs button { padding: 4px 8px; font-size: 0.8rem; }

/* sliders */
.mz-app input[type="range"] { accent-color: var(--primary); cursor: pointer; min-width: 0; }

/* ── transport ── */
.mz-transport {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: color-mix(in srgb, var(--mz-solid) 94%, transparent);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.mz-play {
  display: inline-flex; align-items: center; gap: 10px;
  border: none; border-radius: 999px; padding: 12px 26px 12px 18px; cursor: pointer;
  background: linear-gradient(135deg, #10b981, #22d3ee); color: #fff;
  font-size: 1.3rem; font-weight: 700; box-shadow: 0 8px 22px rgba(16, 185, 129, 0.4);
  transition: transform .15s ease, box-shadow .2s ease;
}
.mz-play:hover { transform: translateY(-2px) scale(1.02); }
.mz-play:active { transform: scale(0.97); }
.mz-play-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); font-size: 1.1rem; }
.mz-play.playing { background: linear-gradient(135deg, #f43f5e, #ec4899); box-shadow: 0 8px 22px rgba(244, 63, 94, 0.4); animation: mzPulse 1.2s ease-in-out infinite; }
@keyframes mzPulse { 50% { box-shadow: 0 8px 30px rgba(244, 63, 94, 0.7); } }
.mz-rec {
  border: 2px solid rgba(239, 68, 68, 0.5); background: rgba(239, 68, 68, 0.08); color: var(--danger);
  border-radius: 999px; padding: 10px 16px; font-weight: 700; font-size: 1rem; cursor: pointer; transition: all .2s ease;
}
.mz-app .mz-rec { color: var(--danger); }
.mz-rec:hover { background: rgba(239, 68, 68, 0.16); }
.mz-app .mz-rec.on { background: var(--danger); color: #fff; animation: mzBlink 1s steps(2) infinite; }
@keyframes mzBlink { 50% { opacity: 0.7; } }
.mz-slider { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; }
.mz-slider input { width: 100px; }
.mz-sl-lbl { white-space: nowrap; color: var(--text-muted); }
.mz-val { min-width: 42px; text-align: center; padding: 3px 8px; border-radius: 10px; background: var(--mz-ctl); font-size: 0.9rem; }
.mz-viz { margin-left: auto; flex: 1 1 60px; min-width: 60px; max-width: 240px; height: 52px; border-radius: 14px; background: var(--mz-ctl); padding: 4px; }

/* ── magic + songs row ── */
.mz-top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; }
.mz-magic { display: flex; gap: 16px; align-items: stretch; }
.mz-surprise {
  flex: 0 0 132px; border: none; border-radius: 22px; cursor: pointer; color: #fff;
  background: linear-gradient(135deg, #f59e0b 0%, #ec4899 55%, #8b5cf6 100%);
  font-size: 1.35rem; font-weight: 700; line-height: 1.2; padding: 14px;
  box-shadow: 0 10px 26px rgba(236, 72, 153, 0.35); transition: transform .2s ease, box-shadow .2s ease;
}
.mz-surprise:hover { transform: translateY(-3px) rotate(-1.5deg); box-shadow: 0 14px 30px rgba(236, 72, 153, 0.5); }
.mz-surprise:active { transform: scale(0.96); }
.mz-tpl-wrap { flex: 1; min-width: 0; }
.mz-templates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mz-tpl {
  display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 14px; cursor: pointer;
  background: var(--mz-ctl); border: 1px solid var(--border-color); font-weight: 600; font-size: 0.9rem; text-align: left;
  transition: transform .15s ease, background .2s ease, border-color .2s ease; min-width: 0;
}
.mz-tpl span:last-child { line-height: 1.15; overflow-wrap: anywhere; }
.mz-tpl:hover { background: var(--mz-ctl-hover); border-color: var(--primary); transform: translateY(-2px); }
.mz-tpl-ic { font-size: 1.35rem; }
.mz-songs .mz-select { flex: 1 1 150px; min-width: 0; }
.mz-btnrow { gap: 6px; }
.mz-len { margin-left: auto; font-family: var(--font-display); font-weight: 600; color: var(--text-muted); font-size: 0.95rem; }

/* ── settings ── */
.mz-settings { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.mz-field { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; }
.mz-field > span { color: var(--text-muted); white-space: nowrap; }
.mz-fx input { width: 90px; }

/* ── patterns & arrangement ── */
.mz-patterns { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; }
.mz-pat-left { flex: 0 0 auto; }
.mz-pats { display: flex; gap: 8px; margin-bottom: 10px; }
.mz-pat {
  width: 54px; height: 54px; border-radius: 16px; cursor: pointer; font-size: 1.5rem; font-weight: 700;
  border: 2px solid var(--pc); background: color-mix(in srgb, var(--pc) 14%, transparent); color: var(--pc);
  transition: transform .15s ease, box-shadow .2s ease; position: relative;
}
.mz-app .mz-pat { color: var(--pc); }
.mz-pat:hover { transform: translateY(-2px); }
.mz-app .mz-pat.active { background: var(--pc); color: #fff; box-shadow: 0 6px 18px color-mix(in srgb, var(--pc) 50%, transparent); transform: scale(1.06); }
.mz-pat.empty::after { content: ''; position: absolute; inset: 5px; border-radius: 11px; border: 2px dashed color-mix(in srgb, var(--pc) 40%, transparent); pointer-events: none; }
.mz-pat.active.empty::after { border-color: rgba(255, 255, 255, 0.45); }
.mz-arr-wrap { flex: 1 1 300px; min-width: 0; }
.mz-arr { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mz-arr-item { position: relative; }
.mz-arr-chip {
  width: 50px; height: 44px; border-radius: 12px; border: none; cursor: pointer; font-weight: 700; font-size: 1.15rem;
  background: var(--pc); color: #fff; box-shadow: 0 4px 12px color-mix(in srgb, var(--pc) 40%, transparent);
  transition: transform .15s ease, box-shadow .2s ease;
}
.mz-app .mz-arr-chip { color: #fff; }
.mz-arr-chip:hover { transform: translateY(-2px); }
.mz-arr-chip.playing { transform: scale(1.15); box-shadow: 0 0 0 3px var(--bg-card-hover), 0 0 0 6px var(--pc), 0 8px 18px color-mix(in srgb, var(--pc) 60%, transparent); }
.mz-arr-x {
  position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--mz-solid); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); font-size: 0.8rem; line-height: 20px; padding: 0;
  opacity: 0; transition: opacity .2s ease;
}
.mz-arr-item:hover .mz-arr-x, .mz-arr-x:focus-visible { opacity: 1; }
@media (hover: none) { .mz-arr-x { opacity: 1; } }
.mz-arr-add {
  height: 44px; padding: 0 14px; border-radius: 12px; cursor: pointer; font-weight: 700; font-size: 1rem;
  border: 2px dashed var(--border-hover); background: transparent; color: var(--text-muted);
}
.mz-arr-add:hover { border-color: var(--primary); color: var(--primary); }

/* ── tracks ── */
.mz-tracks { display: flex; flex-direction: column; gap: 16px; }
.mz-track { padding: 12px 14px 14px; border-top: 4px solid var(--tc); }
.mz-track-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.mz-track.collapsed .mz-track-head { margin-bottom: 0; }
.mz-collapse { background: none; border: none; cursor: pointer; font-size: 1.1rem; width: 28px; height: 28px; border-radius: 8px; color: var(--text-muted); }
.mz-collapse:hover { background: var(--mz-ctl-hover); }
.mz-track-ic { font-size: 1.5rem; }
.mz-track-name { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; margin-right: 6px; color: var(--tc); }
.mz-ms {
  width: 38px; height: 34px; border-radius: 10px; cursor: pointer; font-size: 1rem;
  background: var(--mz-ctl); border: 1px solid var(--border-color); transition: all .2s ease;
}
.mz-ms:hover { background: var(--mz-ctl-hover); }
.mz-ms.on { background: var(--warning); border-color: transparent; box-shadow: 0 3px 10px rgba(245, 158, 11, 0.4); }
.mz-ms.mz-solo.on { background: var(--success); box-shadow: 0 3px 10px rgba(16, 185, 129, 0.4); }
.mz-vol { display: inline-flex; align-items: center; gap: 4px; font-size: 0.95rem; }
.mz-vol input { width: 84px; }
.mz-dice:hover { transform: rotate(-12deg) scale(1.1); }

.mz-scroll { overflow-x: auto; overflow-y: hidden; padding: 4px 2px 8px; margin: 0 -2px; scrollbar-width: thin; }
.mz-grid {
  position: relative; display: grid;
  grid-template-columns: var(--mz-lw) repeat(var(--steps), var(--mz-cw));
  gap: var(--mz-gap); width: max-content;
}
.mz-row-wrap { display: contents; }
.mz-lbl {
  position: sticky; left: 0; z-index: 3; height: var(--mz-ch);
  display: flex; align-items: center; gap: 6px; padding: 0 8px; margin-right: 4px;
  background: var(--mz-solid); border: 1px solid var(--border-color); border-radius: 9px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; white-space: nowrap; overflow: hidden;
  cursor: pointer; color: var(--text-main); text-align: left;
}
button.mz-lbl:hover { border-color: var(--c, var(--primary)); }
.mz-lbl span { font-size: 1rem; }
.mz-corner { background: transparent; border: none; cursor: default; height: 18px; }
.mz-note-lbl i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.mz-row-wrap.root .mz-note-lbl { font-weight: 700; border-color: color-mix(in srgb, var(--c) 55%, transparent); }
.mz-stepnum { height: 18px; text-align: center; font-size: 0.7rem; color: var(--text-faint); font-family: var(--font-display); line-height: 18px; border-radius: 6px; transition: background .08s linear, color .08s linear; }
.mz-stepnum.beat { font-weight: 700; font-size: 0.8rem; color: var(--text-muted); }
.mz-stepnum.now { background: var(--tc); color: #fff; }

.mz-cell {
  height: var(--mz-ch); border-radius: 8px; background: var(--mz-cell); cursor: pointer;
  transition: background .12s ease, box-shadow .12s ease; position: relative; touch-action: manipulation;
}
.mz-cell.alt { background: var(--mz-cell-alt); }
.mz-cell.b::before { content: ''; position: absolute; left: -2px; top: 6px; bottom: 6px; width: 1px; background: var(--border-hover); }
.mz-cell:hover { background: var(--mz-cell-hover); }
.mz-cell.on, .mz-cell.tail {
  background: var(--c); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18), 0 2px 10px color-mix(in srgb, var(--c) 45%, transparent);
}
.mz-cell.on::after {
  content: ''; position: absolute; left: 5px; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.55);
}
.mz-cell.tail { background: color-mix(in srgb, var(--c) 72%, transparent); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.12); }
.mz-cell.cont { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: calc(var(--mz-gap) * -1); }
.mz-cell.tail { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.mz-cell.b.tail::before, .mz-cell.cont + .mz-cell.b::before { display: none; }
.mz-grid-drums .mz-cell.on::after { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 9px; height: 9px; }

.mz-ph {
  position: absolute; top: 0; bottom: 0; left: 0; width: var(--mz-cw); pointer-events: none; z-index: 2;
  border-radius: 9px; opacity: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 30%, transparent), color-mix(in srgb, var(--tc) 12%, transparent));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--tc) 75%, transparent), 0 0 18px color-mix(in srgb, var(--tc) 55%, transparent);
  transition: transform 0.06s linear;
}
.mz-ph.show { opacity: 1; }

/* chords lane */
.mz-grid-chords .mz-lbl:not(.mz-corner) { height: 58px; }
.mz-chord {
  height: 58px; border-radius: 12px; cursor: pointer; border: 2px dashed var(--border-hover); background: transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0 4px;
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease; min-width: 0; overflow: hidden;
}
.mz-chord:hover { transform: translateY(-2px); border-color: var(--primary); }
.mz-chord b { font-size: 1.25rem; line-height: 1.1; }
.mz-chord small { font-size: 0.75rem; opacity: 0.85; font-family: var(--font-body); }
.mz-chord span { font-size: 0.8rem; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mz-app .mz-chord.set { background: var(--cc); border: 2px solid transparent; color: #fff; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.18); }
.mz-chord.hold { border: 2px dashed var(--cc); background: color-mix(in srgb, var(--cc) 14%, transparent); }
.mz-chord.hold span { color: var(--cc); font-weight: 600; }
.mz-chord.now { box-shadow: 0 0 0 3px var(--bg-card-hover), 0 0 0 5px var(--tc), 0 0 20px color-mix(in srgb, var(--tc) 55%, transparent); }

/* popover */
.mz-pop {
  position: absolute; z-index: 60; background: var(--mz-solid); border: 1px solid var(--border-hover);
  border-radius: 18px; padding: 12px; box-shadow: var(--shadow-lg), 0 10px 40px rgba(0, 0, 0, 0.35);
}
.mz-pop[hidden] { display: none; }
.mz-pop-title { font-family: var(--font-display); font-weight: 700; margin-bottom: 8px; font-size: 0.95rem; }
.mz-pop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mz-pop-chord {
  display: flex; flex-direction: column; align-items: center; padding: 8px 2px; border-radius: 12px; border: 2px solid transparent;
  background: var(--cc); cursor: pointer; transition: transform .12s ease;
}
.mz-app .mz-pop-chord { color: #fff; }
.mz-pop-chord b { font-size: 1.1rem; }
.mz-pop-chord small { font-size: 0.72rem; opacity: 0.9; font-family: var(--font-body); }
.mz-pop-chord:hover { transform: scale(1.07); }
.mz-pop-chord.active { border-color: var(--text-main); }
.mz-pop-row { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }

/* ── live keyboard ── */
.mz-live-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
.mz-live-head .mz-mini-h { margin-bottom: 0; }
.mz-oct { font-family: var(--font-display); font-weight: 700; min-width: 26px; text-align: center; }
.mz-kb-scroll { overflow-x: auto; padding-bottom: 6px; }
.mz-kb { position: relative; height: 170px; min-width: 620px; display: flex; user-select: none; -webkit-user-select: none; touch-action: none; }
.mz-key { position: relative; cursor: pointer; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; transition: transform .06s ease, background .1s ease; }
.mz-key.white {
  height: 100%; margin: 0 2px; flex: none; border-radius: 0 0 14px 14px;
  background: linear-gradient(180deg, #ffffff 0%, #eef0f7 100%); color: #334155;
  box-shadow: inset 0 -6px 0 rgba(15, 23, 42, 0.12), 0 4px 10px rgba(0, 0, 0, 0.15); border: 1px solid rgba(15, 23, 42, 0.12);
  padding-bottom: 10px; width: calc(100% / 15 - 4px);
}
.mz-key.black {
  position: absolute; top: 0; height: 60%; z-index: 2; border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, #2a2f45, #0f1220); color: #cbd5e1; box-shadow: inset 0 -5px 0 rgba(255, 255, 255, 0.08), 0 4px 8px rgba(0, 0, 0, 0.35);
  padding-bottom: 6px; margin-left: 2px;
}
.mz-key.in::before { content: ''; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 14px; height: 14px; border-radius: 50%; background: var(--kc); box-shadow: 0 0 10px var(--kc); }
.mz-key.black.in::before { width: 10px; height: 10px; top: 8px; }
.mz-key.root::before { width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, 0.9); }
.mz-key.white.out { background: linear-gradient(180deg, #e5e7ee 0%, #d7dae5 100%); }
.mz-key-name { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; }
.mz-key kbd { font-family: var(--font-body); font-size: 0.7rem; opacity: 0.6; margin-top: 2px; }
.mz-key.white.down { background: linear-gradient(180deg, color-mix(in srgb, var(--kc) 45%, #fff), color-mix(in srgb, var(--kc) 70%, #fff)); transform: translateY(3px); box-shadow: inset 0 -2px 0 rgba(15, 23, 42, 0.12); }
.mz-key.black.down { background: linear-gradient(180deg, var(--kc), color-mix(in srgb, var(--kc) 60%, #000)); transform: translateY(2px); }

/* ── responsive ── */
@media (max-width: 1100px) {
  .mz-top { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  #music-studio-root { --mz-lw: 92px; --mz-cw: 30px; --mz-ch: 30px; }
  .mz-card { padding: 12px; border-radius: 20px; }
  .mz-transport { gap: 10px; padding: 10px 12px; }
  .mz-play { padding: 10px 18px 10px 12px; font-size: 1.15rem; }
  .mz-slider input { width: 90px; }
  .mz-viz { display: none; }
  .mz-magic { flex-direction: column; }
  .mz-surprise { flex: none; padding: 16px; }
  .mz-templates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mz-lbl { font-size: 0.78rem; padding: 0 6px; }
  .mz-hint { display: block; margin: 4px 0 0; }
  .mz-vol input { width: 70px; }
}
@media (max-width: 420px) {
  .mz-sl-lbl { font-size: 0.82rem; }
  .mz-slider input { width: 72px; }
}
.mz-grid[style*="--steps:32"] { --mz-cw: 26px; }
@media (max-width: 760px) { .mz-grid[style*="--steps:32"] { --mz-cw: 26px; } }
@media (prefers-reduced-motion: reduce) {
  .mz-play.playing, .mz-app .mz-rec.on { animation: none; }
  .mz-ph { transition: none; }
}
.mz-app .mz-play, .mz-app .mz-surprise { color: #fff; }
.mz-fab { display: none; }
@media (max-width: 760px) {
  .mz-transport { position: relative; }
  .mz-app .mz-fab {
    display: grid; place-items: center; position: fixed; right: 16px; bottom: 20px; z-index: 80;
    width: 62px; height: 62px; border-radius: 50%; border: none; cursor: pointer; font-size: 1.5rem; color: #fff;
    background: linear-gradient(135deg, #10b981, #22d3ee); box-shadow: 0 10px 24px rgba(16, 185, 129, 0.45);
  }
  .mz-app .mz-fab.playing { background: linear-gradient(135deg, #f43f5e, #ec4899); box-shadow: 0 10px 24px rgba(244, 63, 94, 0.45); }
  .mz-live { margin-bottom: 70px; }
}

/* ═════════════ Tabs, Sheet Music, Learn a Song ═════════════ */
.mz-tabs { display: flex; gap: 8px; flex-wrap: wrap; padding: 6px; border-radius: 22px; background: var(--bg-card); border: 1px solid var(--border-color); width: fit-content; max-width: 100%; }
.mz-tab {
  display: inline-flex; align-items: center; gap: 8px; border: none; background: transparent; cursor: pointer;
  padding: 11px 20px; border-radius: 16px; font-size: 1.08rem; font-weight: 700;
  transition: background .2s ease, color .2s ease, transform .15s ease;
}
.mz-app .mz-tab { color: var(--text-muted); }
.mz-tab span { font-size: 1.25rem; }
.mz-tab:hover { background: var(--mz-ctl-hover); transform: translateY(-1px); }
.mz-app .mz-tab.active { background: var(--grad-main); color: #fff; box-shadow: 0 6px 18px rgba(139, 92, 246, 0.35); }
.mz-pane { display: flex; flex-direction: column; gap: 16px; }
.mz-pane[hidden] { display: none; }
.mz-app:not(.mz-tab-studio) .mz-studio-only, .mz-app:not(.mz-tab-studio) .mz-fab { display: none !important; }

/* sheet */
.mz-sheet { display: flex; flex-direction: column; gap: 12px; }
.mz-sheet-bar, .mz-sheet-tools, .mz-sheet-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.mz-sheet-bar .mz-select { flex: 0 1 240px; min-width: 0; }
.mz-sheet-bar .mz-input { flex: 1 1 160px; }
.mz-play.mz-play-sm { padding: 8px 20px 8px 10px; font-size: 1.1rem; }
.mz-play.mz-play-sm .mz-play-ic { width: 30px; height: 30px; font-size: 0.95rem; }
.mz-app .mz-toggle.active { background: var(--success); color: #fff; border-color: transparent; }
.mz-sym { font-size: 1.1em; }
.mz-paper-wrap {
  background: linear-gradient(180deg, #fffdf7, #fbf6ea); border-radius: 18px; padding: 10px 12px;
  box-shadow: inset 0 0 0 1px rgba(120, 90, 40, 0.14), 0 8px 22px rgba(0, 0, 0, 0.14);
  overflow-x: auto; min-height: 120px;
}
.mz-paper { color: #1f2433; }
.mz-paper svg { display: block; }
.mz-paper .abcjs-note, .mz-paper .abcjs-rest { cursor: pointer; }
#mz-paper .abcjs-note:hover path, #mz-paper .abcjs-rest:hover path { fill: #8b5cf6; }
.mz-paper .mz-sel path, .mz-paper .mz-sel { fill: #8b5cf6 !important; stroke: #8b5cf6; }
.mz-paper .mz-hl path, .mz-paper .mz-hl { fill: #ec4899 !important; stroke: #ec4899; }
.mz-paper .mz-done path, .mz-paper .mz-done { fill: #10b981 !important; stroke: #10b981; }
.mz-paper .mz-next path, .mz-paper .mz-next { fill: #f59e0b !important; stroke: #f59e0b; animation: mzNotePulse 1s ease-in-out infinite; }
@keyframes mzNotePulse { 50% { opacity: 0.45; } }
.mz-paper-fallback { font-family: var(--font-display); font-weight: 600; color: #334155; padding: 18px; line-height: 1.8; }
.mz-sheet-status { min-height: 1.4em; font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; color: var(--text-muted); }
.mz-sheet-status.good { color: var(--success); }

/* learn */
.mz-learn-songs { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.mz-lsong {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left;
  padding: 10px 12px; border-radius: 16px; background: var(--mz-ctl); border: 2px solid var(--border-color); cursor: pointer;
  transition: transform .15s ease, border-color .2s ease, background .2s ease; min-width: 0;
}
.mz-lsong:hover { transform: translateY(-2px); border-color: var(--primary); }
.mz-lsong.active { border-color: var(--secondary); background: color-mix(in srgb, var(--secondary) 14%, transparent); box-shadow: 0 6px 16px color-mix(in srgb, var(--secondary) 25%, transparent); }
.mz-lsong-ic { grid-row: span 2; font-size: 1.7rem; }
.mz-lsong-name { font-weight: 700; font-size: 0.92rem; line-height: 1.15; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.mz-lsong-meta { display: flex; gap: 6px; align-items: center; font-size: 0.75rem; font-family: var(--font-body); }
.mz-lsong-meta b { font-size: 0.72rem; letter-spacing: -1px; }
.mz-lsong .lv { font-style: normal; font-weight: 700; padding: 1px 8px; border-radius: 99px; background: var(--mz-ctl-hover); color: var(--text-muted); }
.mz-lsong .lv1 { background: rgba(16, 185, 129, 0.18); color: var(--success); }
.mz-lsong .lv2 { background: rgba(245, 158, 11, 0.18); color: var(--warning); }
.mz-lsong .lv3 { background: rgba(236, 72, 153, 0.18); color: var(--secondary); }
.mz-learn-stage { display: flex; flex-direction: column; gap: 12px; }
.mz-learn-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mz-learn-title { font-family: var(--font-display); font-size: 1.45rem; font-weight: 700; }
.mz-progress { flex: 1 1 160px; height: 14px; border-radius: 99px; background: var(--mz-ctl-hover); overflow: hidden; }
.mz-progress i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #10b981, #22d3ee, #8b5cf6); transition: width .3s ease; }
.mz-learn-count { font-family: var(--font-display); font-weight: 700; color: var(--text-muted); min-width: 60px; text-align: right; }
.mz-learn-stage:not(.is-custom) .mz-custom-only { display: none; }
.mz-app .mz-btn.on { background: var(--danger); color: #fff; border-color: transparent; animation: mzBlink 1s steps(2) infinite; }
.mz-learn-msg {
  font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; padding: 12px 16px; border-radius: 16px;
  background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--text-main); text-align: center;
}
.mz-learn-msg.oops { background: rgba(245, 158, 11, 0.16); }
.mz-learn-msg.win { background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(236, 72, 153, 0.25)); font-size: 1.35rem; }

/* keyboard states for sheet/learn */
.mz-key sub { font-size: 0.65em; opacity: 0.6; }
.mz-key.next { z-index: 3; }
.mz-key.white.next { background: linear-gradient(180deg, #fff7d6, #fcd34d); box-shadow: 0 0 0 3px #f59e0b, 0 0 24px rgba(245, 158, 11, 0.8); animation: mzKeyGlow 1s ease-in-out infinite; }
.mz-key.black.next { background: linear-gradient(180deg, #fbbf24, #b45309); box-shadow: 0 0 0 3px #f59e0b, 0 0 24px rgba(245, 158, 11, 0.8); animation: mzKeyGlow 1s ease-in-out infinite; }
@keyframes mzKeyGlow { 50% { box-shadow: 0 0 0 3px #f59e0b, 0 0 8px rgba(245, 158, 11, 0.4); } }
.mz-key.white.show, .mz-key.white.glow { background: linear-gradient(180deg, #ffe4f1, #f9a8d4); }
.mz-key.black.show, .mz-key.black.glow { background: linear-gradient(180deg, #f472b6, #9d174d); }
.mz-key.good { animation: mzGood .45s ease-out; }
.mz-key.white.good { background: linear-gradient(180deg, #d1fae5, #6ee7b7); }
.mz-key.bad { animation: mzShake .4s ease-out; }
.mz-key.white.bad { background: linear-gradient(180deg, #fee2e2, #fca5a5); }
@keyframes mzGood { 30% { transform: translateY(4px) scale(1.03); } }
@keyframes mzShake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.mz-sparkle { position: absolute; z-index: 90; pointer-events: none; font-size: 24px; animation: mzSparkle 1s ease-out forwards; }
@keyframes mzSparkle { to { transform: translate(var(--dx), -110px) scale(1.5) rotate(var(--rot)); opacity: 0; } }
@media (max-width: 760px) {
  .mz-tabs { width: 100%; }
  .mz-tab { flex: 1 1 0; justify-content: center; padding: 10px 8px; font-size: 0.92rem; }
  .mz-tab { white-space: nowrap; padding: 10px 4px; font-size: 0.88rem; }
  .mz-tab span { display: none; }
  .mz-durs button { padding: 5px 7px; }
  .mz-learn-songs { grid-template-columns: none; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: 64%; overflow-x: auto; padding-bottom: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .mz-key.next, .mz-paper .mz-next, .mz-sparkle { animation: none; }
}