.lyria-studio {
  background: linear-gradient(180deg, #070b19 0%, #05070a 100%);
  color: #e2e8f0;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

.lyria-tab.active {
  background: #1e293b;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.lyria-studio input[type="range"] {
  -webkit-appearance: none;
  height: 5px;
  border-radius: 8px;
  background: #1e293b;
}

.lyria-studio input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #00f2fe;
  border: 2px solid #fff;
  cursor: pointer;
}

.lyria-piano-white {
  flex: 1;
  min-width: 0;
  border-right: 1px solid #d4d4d8;
  background: linear-gradient(to bottom, #fafafa, #e8e8e4);
  border-bottom: 14px solid #cbd5e1;
  border-radius: 0 0 6px 6px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 8px;
  user-select: none;
  transition: transform 50ms;
}

.lyria-piano-white:active,
.lyria-piano-white.active {
  transform: translateY(8px);
  background: linear-gradient(to bottom, #a5f3fc, #22d3ee);
  border-bottom-width: 6px;
}

.lyria-piano-black {
  position: absolute;
  width: 28px;
  height: 110px;
  background: linear-gradient(to bottom, #27272a, #000);
  border-bottom: 8px solid #111;
  border-radius: 0 0 4px 4px;
  cursor: pointer;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 6px;
  font-size: 7px;
  color: #67e8f9;
  user-select: none;
}

.lyria-piano-black:active,
.lyria-piano-black.active {
  transform: translateY(6px);
  background: linear-gradient(to bottom, #134e4a, #0d9488);
}

.lyria-dj-platter {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #1e293b, #0f172a, #334155, #1e293b);
  border: 3px solid #475569;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8);
}

.lyria-dj-platter.spinning {
  animation: lyria-spin 2s linear infinite;
}

@keyframes lyria-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.lyria-router-node.active-a { background: #a855f7; border-color: #fff; color: #0f172a; transform: scale(1.08); }
.lyria-router-node.active-b { background: #ec4899; border-color: #fff; color: #0f172a; transform: scale(1.08); }
.lyria-router-node.active-c { background: #06b6d4; border-color: #fff; color: #0f172a; transform: scale(1.08); }