:root { color-scheme: dark; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
  background: radial-gradient(circle at 15% 0%, rgba(229, 184, 105, 0.09), transparent 44%),
              radial-gradient(circle at 85% 10%, rgba(56, 189, 248, 0.09), transparent 42%),
              radial-gradient(circle at 50% 95%, rgba(16, 185, 129, 0.06), transparent 45%),
              #07090e;
  color: #f1f5f9;
  overscroll-behavior-y: contain;
}
input[type="range"].studio-fader {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 28px;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}
input[type="range"].studio-fader::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(229,184,105,0.30), rgba(56,189,248,0.30));
  border: 1px solid rgba(148, 163, 184, 0.2);
}
input[type="range"].studio-fader::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -9px;
  border-radius: 50%;
  background: linear-gradient(145deg, #f8dca0, #d49b3d);
  border: 2px solid #07090e;
  box-shadow: 0 0 12px rgba(229, 184, 105, 0.45);
  transition: transform 0.12s ease;
}
input[type="range"].studio-fader:active::-webkit-slider-thumb {
  transform: scale(1.16);
}
input[type="range"].studio-fader::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(30, 41, 59, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.2);
}
input[type="range"].studio-fader::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(145deg, #f8dca0, #d49b3d);
  border: 2px solid #07090e;
  box-shadow: 0 0 12px rgba(229, 184, 105, 0.45);
}
.glass-panel {
  background: rgba(15, 21, 33, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(148, 163, 184, 0.14);
}
.step-cell.active-step {
  box-shadow: 0 0 12px rgba(229, 184, 105, 0.78);
  border-color: #f0c97d;
}
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
@keyframes pulseRec {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.88); }
}
.rec-dot { animation: pulseRec 1.1s infinite ease-in-out; }