/* =========================================================================
   Módulos para tecladistas — Converter, Editor, Biblioteca, Ableton,
   Aplicativo Windows e Play. Escopo: classes .mt-* e páginas .mt-page.
   ========================================================================= */

.mt-page {
  --mt-accent: #22d3ee;
  --mt-accent-2: #38bdf8;
  --mt-accent-rgb: 34, 211, 238;
  --mt-card: rgba(11, 18, 28, 0.72);
  --mt-card-2: rgba(6, 10, 19, 0.78);
  --mt-line: rgba(238, 246, 255, 0.12);
}
.mt-converter, .mt-editor { --mt-accent: #ff7a45; --mt-accent-2: #ffb08a; --mt-accent-rgb: 255, 122, 69; }
.mt-ableton { --mt-accent: #fbbf24; --mt-accent-2: #fde68a; --mt-accent-rgb: 251, 191, 36; }
.mt-windows { --mt-accent: #a78bfa; --mt-accent-2: #c4b5fd; --mt-accent-rgb: 167, 139, 250; }
.mt-playapp { --mt-accent: #34d399; --mt-accent-2: #6ee7b7; --mt-accent-rgb: 52, 211, 153; }

/* ---------- Hero com ilustração ---------- */
.mt-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1rem, 3vw, 2.25rem);
  align-items: center;
}
.mt-hero-copy { min-width: 0; }
.mt-hero .lede { max-width: 32rem; }
.mt-hero h1 .mt-accent {
  background: linear-gradient(100deg, var(--mt-accent), var(--mt-accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.mt-hero-art {
  position: relative;
  min-width: 0;
  border-radius: 22px;
  border: 1px solid var(--mt-line);
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(var(--mt-accent-rgb), 0.18), transparent 60%),
    radial-gradient(90% 80% at 0% 100%, rgba(34, 211, 238, 0.1), transparent 60%),
    linear-gradient(160deg, #0b121c, #060a13);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
  isolation: isolate;
}
.mt-hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 14px 14px;
  mask-image: linear-gradient(180deg, #000, transparent 85%);
  pointer-events: none;
  z-index: -1;
}

.mt-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.9rem 0 0.2rem;
  padding: 0;
}
.mt-chips li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--mt-line);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.82rem;
  color: #c9d6e6;
}
.mt-chips b {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 0.78rem;
  color: var(--mt-accent);
}

/* Pausa geral quando fora da tela / aba oculta */
[data-mt-anim].is-offscreen *,
[data-mt-anim].is-offscreen *::before,
[data-mt-anim].is-offscreen *::after,
.mt-tab-hidden [data-mt-anim] *,
.mt-tab-hidden [data-mt-anim] *::before,
.mt-tab-hidden [data-mt-anim] *::after {
  animation-play-state: paused !important;
}

/* ---------- Mini teclado (ilustrações) ---------- */
.mt-minikeys {
  --wk: calc(100% / 15);
  position: relative;
  height: 54px;
  display: flex;
  border-radius: 8px;
  overflow: hidden;
  background: #0a0f18;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.mt-wk {
  flex: 1;
  margin-right: 2px;
  border-radius: 0 0 5px 5px;
  background: linear-gradient(180deg, #dfe7f1, #f8fbff 70%, #cfd9e6);
}
.mt-wk:last-of-type { margin-right: 0; }
.mt-wk.is-lit { animation: mt-key 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * 0.19s); }
.mt-bk {
  position: absolute;
  top: 0;
  left: calc(var(--wk) * var(--x) - var(--wk) * 0.3);
  width: calc(var(--wk) * 0.6);
  height: 58%;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(180deg, #121a26, #05080d);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
}
@keyframes mt-key {
  0%, 60%, 100% { background: linear-gradient(180deg, #dfe7f1, #f8fbff 70%, #cfd9e6); }
  70%, 85% { background: linear-gradient(180deg, var(--mt-accent-2), var(--mt-accent)); }
}

/* ---------- Converter: ilustração ---------- */
.mt-conv-art {
  display: grid;
  grid-template-columns: auto minmax(40px, 1fr) auto;
  grid-template-rows: 1fr auto;
  align-items: center;
  gap: 1rem 0.6rem;
  padding: 1.4rem 1.3rem 1.2rem;
  min-height: 260px;
}
.mt-conv-art .mt-minikeys { grid-column: 1 / -1; }
.mt-conv-src { display: grid; justify-items: center; gap: 0.45rem; }
.mt-doc {
  position: relative;
  width: 74px;
  height: 92px;
  border-radius: 10px 22px 10px 10px;
  background: linear-gradient(160deg, rgba(34, 211, 238, 0.22), rgba(34, 211, 238, 0.06));
  border: 1px solid rgba(34, 211, 238, 0.45);
  box-shadow: 0 0 32px rgba(34, 211, 238, 0.25);
  display: grid;
  align-content: end;
  padding: 0 0 0.6rem;
  animation: mt-float 4.5s ease-in-out infinite;
}
.mt-doc-fold {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 22px;
  height: 22px;
  border-radius: 0 20px 0 8px;
  background: linear-gradient(225deg, transparent 50%, rgba(34, 211, 238, 0.5) 50%);
}
.mt-doc-ext {
  position: absolute;
  top: 0.55rem;
  left: 0.55rem;
  font: 700 0.8rem/1 ui-monospace, Consolas, monospace;
  color: #a5f3fc;
}
.mt-doc-wave { width: 100%; height: 26px; }
.mt-doc-wave path {
  fill: none;
  stroke: #67e8f9;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 160;
  animation: mt-dash 3s linear infinite;
}
.mt-conv-cap { font-size: 0.75rem; color: var(--muted); letter-spacing: 0.04em; }

.mt-conv-lanes { display: grid; gap: 1.55rem; align-self: center; }
.mt-lane {
  position: relative;
  display: block;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(34, 211, 238, 0.4), rgba(255, 122, 69, 0.45));
  transform-origin: left center;
}
.mt-lane-1 { transform: rotate(-15deg); }
.mt-lane-3 { transform: rotate(15deg); }
.mt-lane i {
  position: absolute;
  inset: 0;
  animation: mt-travel 2.4s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  opacity: 0;
}
.mt-lane i::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px #fff, 0 0 18px var(--mt-accent);
}
.mt-lane i + i { animation-delay: 1.2s; }
.mt-lane-2 i { animation-delay: 0.4s; }
.mt-lane-2 i + i { animation-delay: 1.6s; }
.mt-lane-3 i { animation-delay: 0.8s; }
.mt-lane-3 i + i { animation-delay: 2s; }
@keyframes mt-travel {
  0% { transform: translateX(0); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}
.mt-conv-outs { display: grid; gap: 0.55rem; }
.mt-out {
  display: grid;
  gap: 0.1rem;
  padding: 0.5rem 0.75rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 122, 69, 0.35);
  background: rgba(255, 122, 69, 0.08);
  min-width: 8.5rem;
  animation: mt-glow 3.6s ease-in-out infinite;
}
.mt-out-2 { animation-delay: 1.2s; border-color: rgba(167, 139, 250, 0.4); background: rgba(167, 139, 250, 0.08); }
.mt-out-3 { animation-delay: 2.4s; border-color: rgba(251, 191, 36, 0.38); background: rgba(251, 191, 36, 0.07); }
.mt-out b { font: 700 0.92rem/1.1 ui-monospace, Consolas, monospace; color: #ffd2bd; }
.mt-out-2 b { color: #ddd6fe; }
.mt-out-3 b { color: #fde68a; }
.mt-out em { font-style: normal; font-size: 0.75rem; color: var(--muted); }
@keyframes mt-glow {
  0%, 70%, 100% { transform: translateX(0); box-shadow: none; }
  10%, 30% { transform: translateX(3px); box-shadow: 0 0 22px rgba(255, 122, 69, 0.28); }
}
@keyframes mt-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes mt-dash {
  from { stroke-dashoffset: 320; }
  to { stroke-dashoffset: 0; }
}

/* ---------- Stepper ---------- */
.mt-stepper {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  counter-reset: none;
}
.mt-stepper li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  padding: 0.55rem 0.7rem;
  border-radius: 14px;
  border: 1px solid var(--mt-line);
  background: rgba(255, 255, 255, 0.025);
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 600;
  transition: border-color 0.3s, background 0.3s, color 0.3s;
}
.mt-stepper-n {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  font-size: 0.82rem;
  transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.3s;
}
.mt-stepper-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-stepper li.is-current {
  color: #fff;
  border-color: rgba(var(--mt-accent-rgb), 0.55);
  background: rgba(var(--mt-accent-rgb), 0.1);
}
.mt-stepper li.is-current .mt-stepper-n {
  border-color: var(--mt-accent);
  color: var(--mt-accent);
  animation: mt-ping 2.2s ease-out infinite;
}
.mt-stepper li.is-done { color: #d9fbe9; border-color: rgba(52, 211, 153, 0.35); background: rgba(52, 211, 153, 0.06); }
.mt-stepper li.is-done .mt-stepper-n {
  background: #34d399;
  border-color: #34d399;
  color: transparent;
  position: relative;
}
.mt-stepper li.is-done .mt-stepper-n::after {
  content: "";
  position: absolute;
  width: 0.38rem;
  height: 0.7rem;
  border: solid #04281c;
  border-width: 0 2.4px 2.4px 0;
  transform: translateY(-1px) rotate(45deg);
}
.mt-stepper.is-working li[data-step="3"] { overflow: hidden; }
.mt-stepper.is-working li[data-step="3"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(var(--mt-accent-rgb), 0.18), transparent);
  animation: mt-sweep 1.6s linear infinite;
}
@keyframes mt-ping {
  0% { box-shadow: 0 0 0 0 rgba(var(--mt-accent-rgb), 0.45); }
  70%, 100% { box-shadow: 0 0 0 9px rgba(var(--mt-accent-rgb), 0); }
}
@keyframes mt-sweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

/* ---------- Converter: cards de teclado ---------- */
.mt-target-field { gap: 0.6rem; }
.mt-tgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
}
.mt-tcard {
  --b: #22d3ee;
  --b-rgb: 34, 211, 238;
  appearance: none;
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.3rem;
  min-width: 0;
  padding: 0.75rem 0.8rem 0.8rem;
  border-radius: 16px;
  border: 1px solid var(--mt-line);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(var(--b-rgb), 0.13), transparent 60%),
    var(--mt-card);
  color: var(--ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s, box-shadow 0.2s, opacity 0.2s;
  animation: mt-pop 0.5s ease both;
  animation-delay: calc(var(--n, 0) * 45ms);
}
.mt-tcard[data-brand="roland"] { --b: #ff7a45; --b-rgb: 255, 122, 69; }
.mt-tcard[data-brand="yamaha"] { --b: #a78bfa; --b-rgb: 167, 139, 250; }
.mt-tcard[data-brand="ableton"] { --b: #fbbf24; --b-rgb: 251, 191, 36; }
.mt-tcard[data-brand="nord"] { --b: #f87171; --b-rgb: 248, 113, 113; }
.mt-tcard:hover:not(:disabled),
.mt-tcard:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(var(--b-rgb), 0.55);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(var(--b-rgb), 0.18);
  outline: none;
}
.mt-tcard.is-selected {
  border-color: var(--b);
  box-shadow: 0 0 0 1px var(--b), 0 14px 34px rgba(var(--b-rgb), 0.18);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(var(--b-rgb), 0.26), transparent 65%),
    var(--mt-card);
}
.mt-tcard.is-soon { opacity: 0.45; cursor: not-allowed; }
.mt-tcard-top { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; }
.mt-tcard-brand {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--b);
}
.mt-tcard-pill {
  font-size: 0.64rem;
  font-weight: 700;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.mt-tcard-pill.is-ready { color: #6ee7b7; }
.mt-tcard-pill.is-beta { color: #fcd34d; }
.mt-tcard-pill.is-ext { color: #fde68a; }
.mt-tcard-pill.is-soon { color: var(--muted); }
.mt-tcard-model { font-size: 0.98rem; font-weight: 600; line-height: 1.2; }
.mt-tcard-flow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.15rem;
  font: 600 0.74rem/1 ui-monospace, Consolas, monospace;
  color: var(--muted);
}
.mt-tcard-flow b {
  font-weight: 700;
  padding: 0.2rem 0.38rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: #dbe7f5;
}
.mt-tcard-flow b.is-out { background: rgba(var(--b-rgb), 0.16); color: #fff; }
.mt-tcard-flow i { font-style: normal; color: var(--b); }
.mt-tcard.is-selected .mt-tcard-flow i { animation: mt-nudge 1.2s ease-in-out infinite; }
.mt-tcard-check {
  position: absolute;
  right: 0.55rem;
  bottom: 0.55rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: var(--b);
  transform: scale(0);
  transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.mt-tcard-check::after {
  content: "";
  position: absolute;
  left: 0.42rem;
  top: 0.22rem;
  width: 0.28rem;
  height: 0.52rem;
  border: solid #0b0f17;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.mt-tcard.is-selected .mt-tcard-check { transform: scale(1); }
@keyframes mt-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
@keyframes mt-pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.mt-converter .target-trigger { min-height: 0; padding-top: 0.7rem; padding-bottom: 0.7rem; }
.mt-converter .target-trigger.is-empty .target-keyboard { color: var(--muted); font-weight: 500; }
.mt-converter .target-trigger.mt-has-target {
  border-color: rgba(255, 122, 69, 0.5);
  background: rgba(255, 122, 69, 0.06);
}

/* Modal: cor por marca */
.mt-converter .target-option[data-brand="Roland"] .target-option-brand { color: #ffb08a; }
.mt-converter .target-option[data-brand="Yamaha"] .target-option-brand { color: #c4b5fd; }
.mt-converter .target-option[data-brand="Ableton"] .target-option-brand { color: #fde68a; }
.mt-converter .target-option { transition: transform 0.15s ease, border-color 0.15s; }
.mt-converter .target-option:not(.is-soon):hover { transform: translateY(-1px); }
.mt-converter .target-modal[open] .target-modal-inner { animation: mt-pop 0.28s ease both; }

/* ---------- Dropzone moderna ---------- */
.mt-drop {
  position: relative;
  overflow: hidden;
  min-height: 200px;
  background:
    radial-gradient(500px 200px at 50% 0%, rgba(var(--mt-accent-rgb), 0.12), transparent 70%),
    rgba(0, 0, 0, 0.24);
  border-color: rgba(var(--mt-accent-rgb), 0.35);
}
.mt-drop::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: conic-gradient(from 0deg, transparent 0 60%, rgba(var(--mt-accent-rgb), 0.1) 80%, transparent 100%);
  filter: blur(18px);
  opacity: 0;
  transition: opacity 0.3s;
  animation: mt-spin 5s linear infinite;
  pointer-events: none;
}
.mt-drop.is-drag::before, .mt-drop.mt-ready:not(.has-file)::before { opacity: 1; }
.mt-drop .drop-inner { position: relative; z-index: 1; display: grid; justify-items: center; gap: 0.15rem; }
.mt-drop-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 0.5rem;
  border-radius: 20px;
  background: rgba(var(--mt-accent-rgb), 0.12);
  border: 1px solid rgba(var(--mt-accent-rgb), 0.35);
  color: var(--mt-accent);
  transition: transform 0.3s ease;
}
.mt-drop-icon path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mt-drop-doc { fill: rgba(var(--mt-accent-rgb), 0.1) !important; }
.mt-drop-arrow { animation: mt-bob 1.8s ease-in-out infinite; }
.mt-drop:hover .mt-drop-icon, .mt-drop.is-drag .mt-drop-icon { transform: translateY(-3px) scale(1.05); }
.mt-drop.is-drag { transform: scale(1.01); }
.mt-drop.has-file .mt-drop-icon { background: rgba(52, 211, 153, 0.14); border-color: rgba(52, 211, 153, 0.5); color: #34d399; }
.mt-drop.has-file .mt-drop-arrow { animation: none; }
.mt-drop-accept { margin: 0.55rem 0 0; font-size: 0.8rem; color: var(--muted); }
.mt-drop-accept code {
  padding: 0.08rem 0.35rem;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.07);
  color: #e2ecf7;
  font-size: 0.76rem;
}
.mt-drop .file-label { position: relative; z-index: 1; }
@keyframes mt-spin { to { transform: rotate(360deg); } }
@keyframes mt-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* ---------- Status da conversão ---------- */
.mt-status { position: relative; }
.mt-status:not([hidden]) { animation: mt-pop 0.35s ease both; }
.mt-status-visual { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.35rem; }
.mt-status-orb { position: relative; display: inline-flex; gap: 3px; align-items: flex-end; height: 18px; }
.mt-status-orb i {
  width: 4px;
  height: 100%;
  border-radius: 2px;
  background: var(--mt-accent);
  transform-origin: bottom;
  animation: mt-eq 0.9s ease-in-out infinite;
}
.mt-status-orb i:nth-child(2) { animation-delay: 0.15s; background: #22d3ee; }
.mt-status-orb i:nth-child(3) { animation-delay: 0.3s; }
.mt-status-check { display: none; }
.mt-status-check path { fill: none; stroke: #34d399; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; }
.mt-status.is-done .mt-status-orb, .mt-status.is-error .mt-status-orb { display: none; }
.mt-status.is-done .mt-status-check { display: block; }
.mt-status.is-done .mt-status-check path { animation: mt-draw 0.5s 0.1s ease forwards; }
.mt-status.is-done { border-color: rgba(52, 211, 153, 0.45); box-shadow: 0 0 34px rgba(52, 211, 153, 0.12); }
.mt-status.is-done #downloadBtn {
  background: linear-gradient(100deg, #34d399, #22d3ee);
  color: #04221a;
  border-color: transparent;
  font-weight: 700;
}
.mt-status .bar-fill.is-pulse {
  background-image: linear-gradient(90deg, var(--coral), var(--cyan), var(--coral));
  background-size: 200% 100%;
  animation: mt-bar 1.4s linear infinite;
}
@keyframes mt-eq { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
@keyframes mt-draw { to { stroke-dashoffset: 0; } }
@keyframes mt-bar { from { background-position: 0 0; } to { background-position: -200% 0; } }

/* ---------- Dicas (links laterais) ---------- */
.mt-tips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
}
.mt-tip {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.95rem 1rem;
  border-radius: 18px;
  border: 1px solid var(--mt-line);
  background: var(--mt-card);
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.2s, border-color 0.2s;
}
a.mt-tip:hover { transform: translateY(-2px); border-color: rgba(var(--mt-accent-rgb), 0.45); }
.mt-tips-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mt-tip-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(var(--mt-accent-rgb), 0.12);
  color: var(--mt-accent);
}
.mt-tip-ico svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mt-tip-body { display: grid; gap: 0.2rem; min-width: 0; }
.mt-tip-body strong { font-size: 0.95rem; }
.mt-tip-body span { font-size: 0.84rem; color: var(--muted); line-height: 1.4; }

/* ---------- Editor ---------- */
.mt-ed-art { padding: 1.4rem; min-height: 240px; display: grid; gap: 0.9rem; align-content: center; }
.mt-ed-rows { display: grid; gap: 0.4rem; }
.mt-ed-row {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: center;
  padding: 0.42rem 0.6rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.8rem;
  color: #cbd7e6;
}
.mt-ed-row > i {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: #ff7a45;
  box-shadow: inset 0 0 0 2px #ff7a45;
}
.mt-ed-row em { font-style: normal; color: var(--muted); font-size: 0.74rem; }
.mt-ed-row.is-off { animation: mt-off 6s ease-in-out infinite; }
.mt-ed-row.is-off > i { animation: mt-uncheck 6s ease-in-out infinite; }
.mt-ed-row.is-off:nth-child(4), .mt-ed-row.is-off:nth-child(4) > i { animation-delay: 0.5s; }
@keyframes mt-off {
  0%, 20% { opacity: 1; }
  35%, 80% { opacity: 0.38; }
  95%, 100% { opacity: 1; }
}
@keyframes mt-uncheck {
  0%, 20% { background: #ff7a45; }
  35%, 80% { background: transparent; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35); }
  95%, 100% { background: #ff7a45; }
}
.mt-ed-meter { display: grid; gap: 0.35rem; }
.mt-ed-meter span { display: block; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.mt-ed-meter span i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff7a45, #fbbf24);
  transform-origin: left;
  animation: mt-shrink 6s ease-in-out infinite;
}
.mt-ed-meter p { margin: 0; display: flex; justify-content: space-between; font-size: 0.76rem; color: var(--muted); }
@keyframes mt-shrink {
  0%, 20% { transform: scaleX(1); }
  35%, 80% { transform: scaleX(0.42); }
  95%, 100% { transform: scaleX(1); }
}

.mt-ed-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.mt-ed-search {
  flex: 1 1 14rem;
  min-width: 0;
  position: relative;
}
.mt-ed-search input { width: 100%; padding-left: 2.2rem; }
.mt-ed-search svg {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.mt-ed-toolbar select { flex: 0 1 13rem; width: auto; min-width: 0; max-width: 100%; }
@media (max-width: 560px) { .mt-ed-toolbar select { flex: 1 1 100%; } }
.mt-ed-toolbar .btn { margin-top: 0; }
.mt-editor .editor-presets-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.mt-editor .editor-presets-actions .btn { margin-top: 0; }
.mt-editor .editor-preset-list { max-height: 26rem; overflow: auto; overscroll-behavior: contain; }
.mt-editor .editor-preset-item { position: relative; }
.mt-editor .editor-preset-item.is-off { opacity: 0.5; }
.mt-editor .editor-preset-item.is-off .editor-preset-name { text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, 0.35); }
.mt-editor .editor-preset-size { position: relative; min-width: 4.5rem; text-align: right; }
.mt-ed-wbar {
  display: block;
  height: 3px;
  margin-top: 0.3rem;
  border-radius: 2px;
  background: linear-gradient(90deg, #ff7a45, #fbbf24);
  transform-origin: right;
  transform: scaleX(var(--w, 0));
  opacity: 0.8;
}
.mt-ed-hint { margin: 0; font-size: 0.78rem; color: var(--muted); }

.mt-size {
  display: grid;
  gap: 0.55rem;
  padding: 0.9rem 1rem;
  border-radius: 16px;
  border: 1px solid var(--mt-line);
  background: rgba(0, 0, 0, 0.22);
}
.mt-size-row { display: grid; grid-template-columns: 6.2rem minmax(0, 1fr) 5.2rem; gap: 0.6rem; align-items: center; font-size: 0.82rem; }
.mt-size-row > span:first-child { color: var(--muted); }
.mt-size-row > b { text-align: right; font-variant-numeric: tabular-nums; }
.mt-size-track { height: 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.mt-size-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  transform-origin: left;
  transform: scaleX(var(--s, 1));
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
  background: linear-gradient(90deg, #64748b, #94a3b8);
}
.mt-size-fill.is-new { background: linear-gradient(90deg, #ff7a45, #fbbf24); }
.mt-size-fill.is-result { background: linear-gradient(90deg, #34d399, #22d3ee); }
.mt-size-save { margin: 0; font-size: 0.85rem; color: #a7f3d0; font-weight: 600; }
.mt-size-save.is-none { color: var(--muted); font-weight: 500; }

/* ---------- Biblioteca ---------- */
.mt-lib-hero { align-items: end; }
.mt-lib-stats { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.8rem 0 0; padding: 0; list-style: none; }
.mt-lib-stats li {
  display: grid;
  padding: 0.5rem 0.85rem;
  border-radius: 14px;
  border: 1px solid var(--mt-line);
  background: rgba(255, 255, 255, 0.035);
  min-width: 6.5rem;
}
.mt-lib-stats b { font-size: 1.25rem; font-family: var(--display); line-height: 1.1; }
.mt-lib-stats span { font-size: 0.75rem; color: var(--muted); }
.mt-lib-art {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  padding: 1.1rem;
  align-content: center;
}
.mt-lib-tile {
  --c1: #22d3ee;
  --c2: #0e7490;
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(150deg, var(--c1), var(--c2));
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.4);
  animation: mt-float 5s ease-in-out infinite;
}
.mt-lib-tile:nth-child(2) { --c1: #ff7a45; --c2: #9a3412; animation-delay: -1.5s; }
.mt-lib-tile:nth-child(3) { --c1: #a78bfa; --c2: #5b21b6; animation-delay: -3s; }
.mt-lib-tile:nth-child(4) { --c1: #34d399; --c2: #047857; animation-delay: -0.8s; }
.mt-lib-tile:nth-child(5) { --c1: #fbbf24; --c2: #92400e; animation-delay: -2.2s; }
.mt-lib-tile:nth-child(6) { --c1: #38bdf8; --c2: #1e40af; animation-delay: -3.6s; }
.mt-lib-tile span {
  position: absolute;
  left: 0.55rem;
  bottom: 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.mt-lib-tile i {
  position: absolute;
  inset: 22% 10% 34%;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.55) 0 3px, transparent 3px 7px);
  mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  transform-origin: center;
  animation: mt-breathe 2.6s ease-in-out infinite;
}
.mt-lib-tile:nth-child(even) i { animation-delay: -1.3s; }
@keyframes mt-breathe { 0%, 100% { transform: scaleY(0.55); } 50% { transform: scaleY(1); } }

/* Cards com capa */
.mt-lib .store-grid { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.75rem; }
.mt-lib .sf2-card {
  --mt-c1: #22d3ee;
  --mt-c2: #0e7490;
  max-width: none;
  padding: 0.55rem 0.55rem 0.7rem;
  border-radius: 18px;
  transition: transform 0.2s ease, border-color 0.2s, box-shadow 0.2s;
  animation: mt-pop 0.45s ease both;
}
.mt-lib .sf2-card:nth-child(2) { animation-delay: 30ms; }
.mt-lib .sf2-card:nth-child(3) { animation-delay: 60ms; }
.mt-lib .sf2-card:nth-child(4) { animation-delay: 90ms; }
.mt-lib .sf2-card:nth-child(5) { animation-delay: 120ms; }
.mt-lib .sf2-card:nth-child(n+6) { animation-delay: 150ms; }
.mt-lib .sf2-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.4); border-color: color-mix(in srgb, var(--mt-c1) 55%, transparent); }
.mt-lib .sf2-card-body, .mt-lib .sf2-card-actions { padding: 0 0.2rem; }
.mt-lib .sf2-card-icon.mt-cover {
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 9;
  border-radius: 13px;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(255, 255, 255, 0.22), transparent 50%),
    linear-gradient(140deg, var(--mt-c1), var(--mt-c2));
  color: #fff;
}
.mt-lib .sf2-card-icon.mt-cover > svg:not(.mt-cover-wave):not(.mt-play-i) { display: none; }
.mt-cover-wave,
.sf2-card-icon svg.mt-cover-wave {
  position: absolute;
  inset: 18% 8% 22%;
  width: 84%;
  height: 60%;
  fill: rgba(255, 255, 255, 0.55);
  transform-origin: center;
  transition: transform 0.3s;
}
.sf2-card.is-previewing .mt-cover-wave { animation: mt-breathe 1s ease-in-out infinite; fill: rgba(255, 255, 255, 0.85); }
.mt-lib .sf2-card-badge {
  left: 0.5rem;
  right: auto;
  bottom: 0.45rem;
  color: #fff;
  background: rgba(5, 8, 15, 0.55);
  backdrop-filter: blur(4px);
  font-size: 0.62rem;
  padding: 0.14rem 0.4rem;
}
.mt-cover-size {
  position: absolute;
  right: 0.5rem;
  bottom: 0.45rem;
  font-size: 0.62rem;
  font-weight: 700;
  color: #fff;
  padding: 0.14rem 0.4rem;
  border-radius: 5px;
  background: rgba(5, 8, 15, 0.55);
  backdrop-filter: blur(4px);
}
.mt-lib .sf2-card-check { top: 0.95rem; left: 0.95rem; }
.mt-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 42px;
  height: 42px;
  margin: -21px 0 0 -21px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: #0b1220;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.2s, transform 0.2s;
  z-index: 2;
}
.mt-play-i, .sf2-card-icon .mt-play-i { width: 18px; height: 18px; fill: currentColor; margin-left: 2px; }
.mt-play-eq { display: none; gap: 2px; align-items: flex-end; height: 16px; }
.mt-play-eq i { width: 3px; height: 100%; background: currentColor; border-radius: 2px; transform-origin: bottom; animation: mt-eq 0.8s ease-in-out infinite; }
.mt-play-eq i:nth-child(2) { animation-delay: 0.15s; }
.mt-play-eq i:nth-child(3) { animation-delay: 0.3s; }
.mt-play.is-playing .mt-play-i { display: none; }
.mt-play.is-playing .mt-play-eq { display: flex; }
.mt-play.is-loading .mt-play-eq i { animation-duration: 0.4s; opacity: 0.6; }
.mt-play.is-error { background: rgba(255, 92, 122, 0.9); color: #fff; }
.sf2-card:hover .mt-play, .mt-play:focus-visible, .mt-play.is-playing { opacity: 1; transform: scale(1); }
@media (hover: none) { .mt-play { opacity: 0.92; transform: scale(0.9); } }

.mt-lib .store-nav-item[data-search] { position: relative; padding-left: 1.55rem; }
.mt-lib .store-nav-item[data-search]::before {
  content: "";
  position: absolute;
  left: 0.6rem;
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: -0.25rem;
  border-radius: 50%;
  background: var(--mt-c1, #22d3ee);
  box-shadow: 0 0 8px var(--mt-c1, #22d3ee);
}
.mt-lib .store-search { transition: box-shadow 0.2s, border-color 0.2s; }
.mt-lib .store-search:focus-within { box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.18); }

.mt-lib .library-empty {
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  padding: 2.5rem 1rem 2.2rem;
  border: 1px dashed var(--mt-line);
  border-radius: 20px;
  text-align: center;
  color: #cbd7e6;
  background: rgba(255, 255, 255, 0.02);
}
.mt-lib .library-empty::before {
  content: "";
  width: 72px;
  height: 72px;
  border-radius: 22px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%2322d3ee' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='21' cy='21' r='11'/%3E%3Cpath d='M29 29l8 8M15 21h2l2-4 3 8 2-4h2'/%3E%3C/svg%3E") center / 40px no-repeat,
    rgba(34, 211, 238, 0.1);
  margin-bottom: 0.3rem;
}
.mt-lib .library-empty::after {
  content: "Tente outro nome, uma categoria ou limpe a busca.";
  font-size: 0.85rem;
  color: var(--muted);
}

.mt-skeleton { pointer-events: none; }
.mt-sk-card {
  display: grid;
  gap: 0.5rem;
  padding: 0.55rem;
  border-radius: 18px;
  border: 1px solid var(--mt-line);
  background: rgba(8, 14, 28, 0.55);
}
.mt-sk-card i, .mt-sk-card b, .mt-sk-card em {
  display: block;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));
  background-size: 200% 100%;
  animation: mt-bar 1.2s linear infinite;
}
.mt-sk-card i { aspect-ratio: 16 / 9; border-radius: 13px; }
.mt-sk-card b { height: 0.9rem; width: 75%; }
.mt-sk-card em { height: 0.7rem; width: 45%; }

.mt-lib .editorial-pack-card { transition: transform 0.2s, border-color 0.2s; }
.mt-lib .editorial-pack-card:not(:disabled):hover { transform: translateY(-2px); }

/* ---------- Página do timbre ---------- */
.mt-timbre {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(1rem, 4vw, 3rem);
  align-items: center;
}
.mt-timbre-cover {
  --mt-c1: #22d3ee;
  --mt-c2: #0e7490;
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 360px;
  width: 100%;
  border-radius: 26px;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(255, 255, 255, 0.25), transparent 50%),
    linear-gradient(140deg, var(--mt-c1), var(--mt-c2));
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), 0 0 60px color-mix(in srgb, var(--mt-c1) 25%, transparent);
}
.mt-timbre-wave { position: absolute; inset: 0; }
.mt-timbre-wave .mt-cover-wave { inset: 26% 8% 30%; }
.mt-timbre-cover.is-previewing .mt-cover-wave { animation: mt-breathe 1s ease-in-out infinite; fill: rgba(255, 255, 255, 0.85); }
.mt-timbre-tag {
  position: absolute;
  left: 1rem;
  top: 1rem;
  font: 700 0.78rem/1 ui-monospace, Consolas, monospace;
  padding: 0.35rem 0.55rem;
  border-radius: 8px;
  background: rgba(5, 8, 15, 0.5);
  color: #fff;
}
.mt-timbre-cat {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  right: 1rem;
  font-family: var(--display);
  font-size: 1.35rem;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.mt-timbre-player {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1rem 0 0.25rem;
  padding: 0.55rem 0.9rem 0.55rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--mt-line);
  background: rgba(255, 255, 255, 0.04);
  max-width: 26rem;
}
.mt-timbre-player .mt-play {
  position: static;
  margin: 0;
  opacity: 1;
  transform: none;
  flex: none;
}
.mt-timbre-play-label { font-weight: 600; font-size: 0.92rem; white-space: nowrap; }
.mt-timbre-track { flex: 1; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); overflow: hidden; min-width: 2rem; }
.mt-timbre-track i { display: block; height: 100%; background: var(--cyan); transform-origin: left; transform: scaleX(0); transition: transform 0.25s linear; }
.mt-timbre-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.85rem 0 0; padding: 0; }
.mt-timbre-facts li {
  font-size: 0.8rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--mt-line);
  background: rgba(255, 255, 255, 0.035);
  color: #cbd7e6;
}
.mt-timbre-targets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.55rem; margin: 0.4rem 0 0.2rem; }
.mt-timbre-targets li {
  list-style: none;
  padding: 0.7rem 0.8rem;
  border-radius: 14px;
  border: 1px solid var(--mt-line);
  background: var(--mt-card);
  display: grid;
  gap: 0.15rem;
}
.mt-timbre-targets b { font: 700 0.85rem/1.1 ui-monospace, Consolas, monospace; color: #ffd2bd; }
.mt-timbre-targets span { font-size: 0.8rem; color: var(--muted); }
.mt-timbre-targets ul, ul.mt-timbre-targets { padding: 0; }

.mt-timbre .timbre-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.mt-timbre .timbre-actions .btn { margin-top: 0; }

/* Categoria */
.mt-cat-hero { position: relative; --mt-c1: #22d3ee; --mt-c2: #0e7490; }
.mt-cat-art {
  position: relative;
  margin-top: 0.8rem;
  height: 84px;
  border-radius: 18px;
  overflow: hidden;
  background: radial-gradient(120% 120% at 0% 0%, rgba(255, 255, 255, 0.22), transparent 50%), linear-gradient(120deg, var(--mt-c1), var(--mt-c2));
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.mt-cat-art .mt-cover-wave { inset: 18% 3%; width: 94%; height: 64%; }
@media (min-width: 861px) {
  .mt-cat-hero { padding-right: min(36%, 380px); }
  .mt-cat-art { position: absolute; right: 0; top: 50%; width: min(33%, 350px); height: 110px; margin: 0; transform: translateY(-40%); }
}
.mt-cat-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  color: var(--muted);
}

/* Meus / Enviar */
.mt-meus-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.55rem; }
.mt-meus-list li a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.7rem;
  border-radius: 14px;
  border: 1px solid var(--mt-line);
  background: var(--mt-card);
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.2s, border-color 0.2s;
}
.mt-meus-list li a:hover { transform: translateY(-2px); border-color: rgba(34, 211, 238, 0.45); }
.mt-meus-dot {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, #22d3ee, #0e7490);
  font: 700 0.62rem/1 ui-monospace, Consolas, monospace;
  color: #fff;
}
.mt-meus-list li:nth-child(3n+2) .mt-meus-dot { background: linear-gradient(140deg, #ff7a45, #9a3412); }
.mt-meus-list li:nth-child(3n+3) .mt-meus-dot { background: linear-gradient(140deg, #a78bfa, #5b21b6); }
.mt-meus-text { display: grid; min-width: 0; }
.mt-meus-text strong { font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-meus-text span { font-size: 0.76rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-empty {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  text-align: center;
  padding: 1.8rem 1rem;
  border: 1px dashed var(--mt-line);
  border-radius: 18px;
  color: var(--muted);
}
.mt-empty svg { color: #22d3ee; opacity: 0.85; }
.mt-empty svg * { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mt-empty p { margin: 0; }
.mt-empty .btn { margin-top: 0.3rem; }

.mt-upload-file {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  padding: 1.4rem 1rem;
  border: 1.5px dashed rgba(34, 211, 238, 0.4);
  border-radius: 16px;
  background: rgba(34, 211, 238, 0.05);
  text-align: center;
  transition: border-color 0.2s, background 0.2s;
}
.mt-upload-file:hover, .mt-upload-file:focus-within, .mt-upload-file.is-drag { border-color: #22d3ee; background: rgba(34, 211, 238, 0.1); }
.mt-upload-file input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.mt-upload-file strong { font-size: 0.95rem; }
.mt-upload-file span { font-size: 0.8rem; color: var(--muted); overflow-wrap: anywhere; }
.mt-upload-file.has-file { border-style: solid; border-color: rgba(52, 211, 153, 0.6); background: rgba(52, 211, 153, 0.07); }
.mt-status-pill {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid var(--mt-line);
}

/* ---------- Páginas de produto (Ableton, Windows, Play) ---------- */
.mt-cta-row { display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center; margin: 1rem 0 0.25rem; }
.mt-cta-row .btn { margin-top: 0; }
.mt-btn-accent {
  background: linear-gradient(100deg, var(--mt-accent), var(--mt-accent-2)) !important;
  color: #120c02 !important;
  border-color: transparent !important;
  box-shadow: 0 10px 26px rgba(var(--mt-accent-rgb), 0.28) !important;
  gap: 0.5rem;
}
.mt-btn-accent svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mt-btn-accent[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; box-shadow: none !important; }
.mt-meta-line { font-size: 0.8rem; color: var(--muted); margin: 0.35rem 0 0; }
.mt-meta-line code { font-size: 0.76rem; }

.mt-section-title { font-family: var(--display); font-size: clamp(1.3rem, 3vw, 1.6rem); margin: 0 0 0.9rem; }
.mt-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
  counter-reset: mtstep;
}
.mt-steps.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mt-steps > li {
  counter-increment: mtstep;
  position: relative;
  display: block;
  padding: 1rem 0.95rem 1.05rem;
  border-radius: 18px;
  border: 1px solid var(--mt-line);
  background: var(--mt-card);
  font-size: 0.9rem;
  line-height: 1.45;
  color: #cfdbe9;
}
.mt-steps > li::before {
  content: counter(mtstep);
  display: grid;
  margin-bottom: 0.6rem;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 11px;
  background: rgba(var(--mt-accent-rgb), 0.14);
  border: 1px solid rgba(var(--mt-accent-rgb), 0.4);
  color: var(--mt-accent);
  font-weight: 700;
}
.mt-steps > li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 2rem;
  right: -0.55rem;
  width: 0.45rem;
  height: 2px;
  background: rgba(var(--mt-accent-rgb), 0.45);
}
.mt-steps strong { color: #fff; }
.mt-steps code { font-size: 0.82rem; }

.mt-req {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  padding: 0.95rem 1.05rem;
  border-radius: 18px;
  border: 1px solid rgba(var(--mt-accent-rgb), 0.28);
  background: rgba(var(--mt-accent-rgb), 0.06);
}
.mt-req p { margin: 0; font-size: 0.92rem; line-height: 1.5; color: #d5e1ee; }
.mt-req-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: rgba(var(--mt-accent-rgb), 0.15);
  color: var(--mt-accent);
}
.mt-req-ico svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.mt-acc { display: grid; gap: 0.55rem; }
.mt-acc details {
  border-radius: 16px;
  border: 1px solid var(--mt-line);
  background: var(--mt-card);
  overflow: hidden;
}
.mt-acc summary {
  cursor: pointer;
  list-style: none;
  padding: 0.85rem 1rem;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  align-items: center;
}
.mt-acc summary::-webkit-details-marker { display: none; }
.mt-acc summary::after {
  content: "";
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border: solid var(--muted);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  transition: transform 0.2s;
}
.mt-acc details[open] summary::after { transform: rotate(-135deg); }
.mt-acc-body { padding: 0 1rem 1rem; font-size: 0.9rem; line-height: 1.55; color: #cfdbe9; }
.mt-acc-body p { margin: 0 0 0.6rem; }
.mt-acc-body ol { margin: 0 0 0.6rem; padding-left: 1.2rem; }
.mt-acc-body li { margin: 0.2rem 0; }

.mt-dl {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 1.15rem 1.25rem;
  border-radius: 22px;
  border: 1px solid rgba(var(--mt-accent-rgb), 0.4);
  background:
    radial-gradient(90% 140% at 100% 0%, rgba(var(--mt-accent-rgb), 0.18), transparent 60%),
    linear-gradient(160deg, #0b121c, #060a13);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.mt-dl-ico {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: rgba(var(--mt-accent-rgb), 0.16);
  color: var(--mt-accent);
}
.mt-dl-ico svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mt-dl-copy { min-width: 0; }
.mt-dl-copy p { margin: 0; }
.mt-dl-kicker { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mt-accent); }
.mt-dl-copy h2 { margin: 0.15rem 0 0.2rem; font-family: var(--display); font-size: 1.35rem; }
.mt-dl-copy p:last-child { font-size: 0.86rem; color: var(--muted); overflow-wrap: anywhere; }
.mt-dl-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; }
.mt-dl-actions .btn { margin-top: 0; }
.mt-fine { font-size: 0.82rem; color: var(--muted); line-height: 1.5; }
.mt-fine p { margin: 0; }

/* Ableton: janela do Live com Sampler */
.mt-daw { padding: 0.9rem; min-height: 260px; display: grid; gap: 0.6rem; align-content: center; }
.mt-win-bar { display: flex; gap: 0.35rem; align-items: center; font-size: 0.72rem; color: var(--muted); }
.mt-win-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.mt-win-bar span { margin-left: 0.4rem; }
.mt-daw-body { display: grid; grid-template-columns: 34% minmax(0, 1fr); gap: 0.55rem; }
.mt-daw-browser { display: grid; gap: 0.3rem; align-content: start; padding: 0.5rem; border-radius: 10px; background: rgba(255, 255, 255, 0.035); font-size: 0.7rem; color: #aebdd0; }
.mt-daw-browser span { padding: 0.25rem 0.35rem; border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-daw-browser span.is-sf2 { background: rgba(251, 191, 36, 0.18); color: #fde68a; animation: mt-pick 5s ease-in-out infinite; }
.mt-daw-dev { position: relative; padding: 0.55rem; border-radius: 10px; background: #12161e; border: 1px solid rgba(251, 191, 36, 0.25); display: grid; gap: 0.45rem; }
.mt-daw-dev header { display: flex; justify-content: space-between; font-size: 0.7rem; font-weight: 700; color: #fde68a; }
.mt-daw-dev header em { font-style: normal; color: var(--muted); font-weight: 500; }
.mt-zones { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; height: 38px; }
.mt-zones i { border-radius: 4px; background: rgba(251, 191, 36, 0.18); transform-origin: bottom; animation: mt-zone 5s ease-in-out infinite; }
.mt-zones i:nth-child(2) { animation-delay: 0.1s; } .mt-zones i:nth-child(3) { animation-delay: 0.2s; }
.mt-zones i:nth-child(4) { animation-delay: 0.3s; } .mt-zones i:nth-child(5) { animation-delay: 0.4s; } .mt-zones i:nth-child(6) { animation-delay: 0.5s; }
.mt-env { height: 34px; width: 100%; }
.mt-env path { fill: rgba(251, 191, 36, 0.12); stroke: #fbbf24; stroke-width: 1.6; stroke-linejoin: round; }
.mt-daw .mt-minikeys { height: 40px; }
.mt-drop-file {
  position: absolute;
  left: 8%;
  top: 30%;
  font: 700 0.7rem/1 ui-monospace, Consolas, monospace;
  padding: 0.35rem 0.5rem;
  border-radius: 7px;
  background: #fbbf24;
  color: #1a1203;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4);
  animation: mt-dragfile 5s ease-in-out infinite;
  z-index: 3;
}
@keyframes mt-dragfile {
  0%, 8% { transform: translate(0, 0); opacity: 0; }
  14% { opacity: 1; }
  40% { transform: translate(var(--drag-x, 170px), 12px); opacity: 1; }
  48%, 100% { transform: translate(var(--drag-x, 170px), 12px) scale(0.6); opacity: 0; }
}
@keyframes mt-zone {
  0%, 42% { transform: scaleY(0.2); background: rgba(251, 191, 36, 0.12); }
  52%, 90% { transform: scaleY(1); background: rgba(251, 191, 36, 0.45); }
  100% { transform: scaleY(0.2); }
}
@keyframes mt-pick { 0%, 6%, 50%, 100% { opacity: 1; } 10%, 40% { opacity: 0.45; } }

/* Windows: janela do app */
.mt-app { padding: 0.9rem; min-height: 260px; display: grid; gap: 0.6rem; align-content: center; }
.mt-app-body { display: grid; grid-template-columns: minmax(0, 1fr) 40%; gap: 0.55rem; }
.mt-app-list { display: grid; gap: 0.28rem; padding: 0.5rem; border-radius: 10px; background: rgba(255, 255, 255, 0.035); }
.mt-app-list span { font-size: 0.72rem; padding: 0.3rem 0.45rem; border-radius: 6px; color: #b8c6d8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-app-list span.is-on { background: rgba(167, 139, 250, 0.2); color: #ede9fe; }
.mt-app-side { display: grid; gap: 0.45rem; align-content: start; }
.mt-knobs { display: flex; gap: 0.45rem; justify-content: space-around; padding: 0.5rem; border-radius: 10px; background: rgba(255, 255, 255, 0.035); }
.mt-knob { position: relative; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #2b3446, #0d121b); box-shadow: inset 0 0 0 2px rgba(167, 139, 250, 0.4); }
.mt-knob::after { content: ""; position: absolute; left: 50%; top: 4px; width: 2px; height: 9px; margin-left: -1px; border-radius: 1px; background: #c4b5fd; transform-origin: 50% 11px; animation: mt-turn 4s ease-in-out infinite; }
.mt-knob:nth-child(2)::after { animation-delay: -1.3s; }
.mt-knob:nth-child(3)::after { animation-delay: -2.6s; }
.mt-meter { display: flex; gap: 3px; align-items: flex-end; height: 44px; padding: 0.4rem 0.5rem; border-radius: 10px; background: rgba(255, 255, 255, 0.035); }
.mt-meter i { flex: 1; height: 100%; border-radius: 2px; background: linear-gradient(0deg, #34d399, #fbbf24 70%, #ff5c7a); transform-origin: bottom; animation: mt-eq 1.1s ease-in-out infinite; }
.mt-meter i:nth-child(2n) { animation-delay: -0.3s; } .mt-meter i:nth-child(3n) { animation-delay: -0.6s; }
.mt-panic { justify-self: start; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.08em; padding: 0.25rem 0.5rem; border-radius: 6px; background: rgba(255, 92, 122, 0.18); color: #fda4af; }
@keyframes mt-turn { 0%, 100% { transform: rotate(-120deg); } 50% { transform: rotate(100deg); } }

/* Play: celular + navegador */
.mt-devices { min-height: 260px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.9rem; align-items: end; padding: 1.2rem 1.2rem 1rem; }
.mt-browser { border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.12); background: #0d131d; overflow: hidden; }
.mt-browser-bar { display: flex; gap: 0.3rem; align-items: center; padding: 0.4rem 0.55rem; background: rgba(255, 255, 255, 0.04); }
.mt-browser-bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); }
.mt-browser-bar span { flex: 1; margin-left: 0.4rem; height: 14px; border-radius: 7px; background: rgba(255, 255, 255, 0.06); font-size: 0.6rem; line-height: 14px; padding-left: 0.5rem; color: var(--muted); overflow: hidden; white-space: nowrap; }
.mt-browser-body { padding: 0.65rem; display: grid; gap: 0.55rem; }
.mt-browser-body .mt-minikeys { height: 46px; }
.mt-preset-pill { justify-self: start; font-size: 0.7rem; padding: 0.25rem 0.55rem; border-radius: 999px; background: rgba(52, 211, 153, 0.15); color: #a7f3d0; }
.mt-phone {
  width: 108px;
  height: 196px;
  border-radius: 22px;
  border: 2px solid rgba(255, 255, 255, 0.16);
  background: #0d131d;
  padding: 0.7rem 0.45rem;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0.45rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
  animation: mt-float 5s ease-in-out infinite;
}
.mt-phone-notch { justify-self: center; width: 36px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.15); }
.mt-phone-list { display: grid; gap: 0.25rem; align-content: start; }
.mt-phone-list span { height: 14px; border-radius: 5px; background: rgba(255, 255, 255, 0.06); }
.mt-phone-list span.is-on { background: rgba(52, 211, 153, 0.35); }
.mt-phone .mt-minikeys { height: 46px; --wk: calc(100% / 7); }

/* ---------- Responsivo ---------- */
.mt-show-sm { display: none; }
@media (max-width: 560px) { .mt-show-sm { display: inline; } .mt-hide-sm { display: none; } }
@media (max-width: 860px) {
  .mt-hero { grid-template-columns: minmax(0, 1fr); }
  .mt-hero-art { order: 2; }
  .mt-tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mt-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mt-steps.is-3 { grid-template-columns: minmax(0, 1fr); }
  .mt-steps > li::after { display: none; }
  .mt-tips { grid-template-columns: minmax(0, 1fr); }
  .mt-timbre { grid-template-columns: minmax(0, 1fr); }
  .mt-timbre-cover { max-width: 260px; }
  .mt-timbre-targets { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .mt-conv-art { padding: 1rem; gap: 0.8rem 0.4rem; min-height: 0; }
  .mt-doc { width: 58px; height: 74px; }
  .mt-out { min-width: 0; padding: 0.4rem 0.55rem; }
  .mt-out em { font-size: 0.68rem; }
  .mt-conv-lanes { gap: 1.2rem; }
  .mt-stepper li { padding: 0.45rem 0.45rem; gap: 0.35rem; font-size: 0.78rem; }
  .mt-stepper-n { width: 1.45rem; height: 1.45rem; font-size: 0.74rem; }
  .mt-tcard { padding: 0.65rem 0.65rem 0.7rem; }
  .mt-tcard-model { font-size: 0.88rem; }
  .mt-steps { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  .mt-steps > li { padding: 0.8rem 0.9rem 0.8rem 3.4rem; min-height: 3.6rem; }
  .mt-steps > li::before { position: absolute; left: 0.85rem; top: 0.75rem; margin: 0; }
  .mt-dl { grid-template-columns: auto minmax(0, 1fr); }
  .mt-dl-actions { grid-column: 1 / -1; justify-content: stretch; }
  .mt-dl-actions .btn { flex: 1 1 auto; }
  .mt-size-row { grid-template-columns: 5rem minmax(0, 1fr) 4.4rem; font-size: 0.78rem; }
  .mt-devices { grid-template-columns: minmax(0, 1fr) auto; padding: 0.9rem; }
  .mt-phone { width: 92px; height: 170px; }
  .mt-lib .store-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; }
  .mt-lib-art { grid-template-columns: repeat(3, minmax(0, 1fr)); min-height: 0; }
  .mt-lib-tile:nth-child(n+4) { display: none; }
  .mt-daw-body { grid-template-columns: minmax(0, 1fr); }
  .mt-daw-browser { display: none; }
  .mt-app-body { grid-template-columns: minmax(0, 1fr); }
  .mt-app-side { grid-template-columns: 1fr 1fr; }
  .mt-panic { display: none; }
}

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  .mt-page *, .mt-page *::before, .mt-page *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.001ms !important;
  }
  .mt-lane i, .mt-drop-file { display: none; }
  .mt-reveal { opacity: 1 !important; transform: none !important; }
}

.mt-js .mt-reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; }
.mt-reveal.is-in { opacity: 1; transform: none; }