.mtr-root {
  --mtr-primary: #06b6d4;
  --mtr-primary-light: #cffafe;
  --mtr-primary-dim: rgba(6, 182, 212, 0.15);
  --mtr-playing-bg: #ef4444;
  --mtr-playing-hover: #dc2626;
  --mtr-bg: #fff;
  --mtr-bg-inner: #f1f5f9;
  --mtr-bg-card: #f8fafc;
  --mtr-bg-circle: #e2e8f0;
  --mtr-border: #e2e8f0;
  --mtr-text: #0f172a;
  --mtr-text-muted: #64748b;
  --mtr-dot-idle: #e2e8f0;
  --mtr-warning-bg: #fffbeb;
  --mtr-warning-border: #fde68a;
  --mtr-warning-text: #92400e;
  --mtr-shadow: rgba(0, 0, 0, 0.15);
  --mtr-shadow-btn: rgba(0, 0, 0, 0.2);

  width: 100%;
  max-width: 28rem;
  margin: 0 auto;
}

.theme-dark .mtr-root {
  --mtr-primary: #22d3ee;
  --mtr-primary-light: rgba(6, 182, 212, 0.2);
  --mtr-primary-dim: rgba(6, 182, 212, 0.1);
  --mtr-bg: #0f172a;
  --mtr-bg-inner: #1e293b;
  --mtr-bg-card: #1e293b;
  --mtr-bg-circle: #334155;
  --mtr-border: #1e293b;
  --mtr-text: #f8fafc;
  --mtr-text-muted: #94a3b8;
  --mtr-dot-idle: #334155;
  --mtr-warning-bg: rgba(251, 191, 36, 0.08);
  --mtr-warning-border: rgba(251, 191, 36, 0.25);
  --mtr-warning-text: #fef3c7;
  --mtr-shadow: rgba(0, 0, 0, 0.5);
  --mtr-shadow-btn: rgba(0, 0, 0, 0.4);
}

.mtr-container {
  background: var(--mtr-bg);
  border: 1px solid var(--mtr-border);
  border-radius: 1.5rem;
  box-shadow: 0 25px 50px -12px var(--mtr-shadow);
  padding: 1.5rem;
}

.mtr-beat-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
}

.mtr-beat-visual {
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
  background: var(--mtr-bg-inner);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.075s ease, background 0.075s ease;
}

.mtr-beat-inner {
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  background: var(--mtr-bg-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.mtr-bpm-display {
  font-size: 3rem;
  font-weight: 900;
  color: var(--mtr-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.05em;
}

.mtr-ripple {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--mtr-primary);
  opacity: 0;
  transform: scale(0.5);
}

.mtr-dots {
  position: absolute;
  bottom: -1.5rem;
  display: flex;
  gap: 0.5rem;
}

.mtr-controls {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.mtr-play-row {
  display: flex;
  justify-content: center;
}

.mtr-play-btn {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: var(--mtr-text);
  color: var(--mtr-bg);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 15px -3px var(--mtr-shadow-btn);
  transition: transform 0.2s, background 0.2s;
  outline: none;
}

.mtr-play-btn:hover {
  transform: scale(1.05);
}

.mtr-play-btn:active {
  transform: scale(0.95);
}

.mtr-play-btn:focus-visible {
  box-shadow: 0 0 0 4px var(--mtr-primary-dim);
}

.mtr-icon {
  width: 2.5rem;
  height: 2.5rem;
}

.mtr-icon:first-child {
  margin-left: 0.25rem;
}

.mtr-slider-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mtr-slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--mtr-text-muted);
}

.mtr-bpm-slider,
.mtr-volume-slider {
  width: 100%;
  border-radius: 0.5rem;
  appearance: none;
  -webkit-appearance: none;
  background: var(--mtr-bg-circle);
  cursor: pointer;
  outline: none;
}

.mtr-bpm-slider {
  height: 0.75rem;
}

.mtr-volume-slider {
  height: 0.5rem;
}

.mtr-bpm-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--mtr-primary);
  box-shadow: 0 4px 6px -1px var(--mtr-shadow-btn);
  transition: transform 0.1s;
  cursor: pointer;
}

.mtr-bpm-slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

.mtr-bpm-slider::-moz-range-thumb {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: none;
  background: var(--mtr-primary);
  box-shadow: 0 4px 6px -1px var(--mtr-shadow-btn);
  cursor: pointer;
}

.mtr-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--mtr-text-muted);
  transition: transform 0.1s;
  cursor: pointer;
}

.mtr-volume-slider::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: none;
  background: var(--mtr-text-muted);
  cursor: pointer;
}

.mtr-adjust-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.mtr-spacer {
  flex: 1;
}

.mtr-adj-btn {
  width: 3rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  background: var(--mtr-bg-card);
  color: var(--mtr-text-muted);
  border: 1px solid var(--mtr-border);
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mtr-adj-btn:hover {
  background: var(--mtr-bg-circle);
}

.mtr-adj-btn:active {
  transform: scale(0.95);
}

.mtr-volume-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.5rem;
}

.mtr-volume-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--mtr-text-muted);
  flex-shrink: 0;
}

.mtr-bottom-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--mtr-border);
}

.mtr-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--mtr-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.mtr-beats-section {
  display: flex;
  flex-direction: column;
}

.mtr-beats-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mtr-beats-btn {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--mtr-bg-inner);
  color: var(--mtr-text);
  border: 1px solid var(--mtr-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: 700;
  transition: background 0.15s, transform 0.1s;
}

.mtr-beats-btn:hover {
  background: var(--mtr-bg-circle);
}

.mtr-beats-btn:active {
  transform: scale(0.95);
}

.mtr-beats-display {
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--mtr-text);
  font-variant-numeric: tabular-nums;
  width: 1.25rem;
  text-align: center;
}

.mtr-tap-section {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.mtr-tap-btn {
  padding: 0.5rem 1.5rem;
  background: var(--mtr-bg-inner);
  color: var(--mtr-text);
  border: 1px solid var(--mtr-border);
  border-radius: 9999px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  width: 100%;
}

.mtr-tap-btn:hover {
  background: var(--mtr-bg-circle);
}

.mtr-tap-btn:active {
  transform: scale(0.95);
}

.mtr-warning {
  margin-top: 1rem;
  padding: 1rem;
  background: var(--mtr-warning-bg);
  border: 1px solid var(--mtr-warning-border);
  border-radius: 0.75rem;
  font-size: 0.875rem;
  color: var(--mtr-warning-text);
}

.mtr-warning-inner {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.mtr-warning-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.mtr-warning p {
  margin: 0;
}

@keyframes mtr-ripple-anim {
  0% {
    transform: scale(0.8);
    opacity: 0.8;
  }

  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

.animate-ripple {
  animation: mtr-ripple-anim 0.3s ease-out forwards;
}

.mtr-hidden {
  display: none;
}

.mtr-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--mtr-dot-idle, #e2e8f0);
  transition: background 50ms, transform 50ms;
}

.mtr-dot.mtr-dot-accent {
  width: 1rem;
  height: 1rem;
}

.mtr-dot.mtr-dot-active {
  background: var(--mtr-primary, #06b6d4);
  transform: scale(1.25);
}

.mtr-play-btn.mtr-playing {
  background: var(--mtr-playing-bg, #ef4444);
  color: #fff;
}

.mtr-beat-visual.mtr-beat-accent {
  transform: scale(1.05);
  background: var(--mtr-primary-light, #cffafe);
}

.mtr-tap-btn.mtr-tap-pressed {
  transform: scale(0.95);
  background: var(--mtr-primary-dim, rgba(6, 182, 212, 0.15));
}