body { 
  display: flex; flex-direction: column; align-items: center; 
  background: #222; color: #fff; font-family: sans-serif; 
  touch-action: none; margin-top: 50px; 
}

/* --- MASTER LAYOUT --- */
.layout-container {
  display: flex; flex-wrap: wrap; gap: 70px; justify-content: center; 
  align-items: flex-start; 
  margin-bottom: 40px; padding: 20px; width: 100%; max-width: 1200px;
}

.synth-engine {
  display: flex; 
  flex-direction: column; /* Stacks the columns and the touch strip */
  gap: 50px; 
  align-items: center; 
}

.synth-columns {
  display: flex; gap: 50px; align-items: flex-start; justify-content: center; width: 100%;
}

.synth-col { display: flex; flex-direction: column; gap: 50px; align-items: center; }
.center-col { margin-top: 10px; }

.global-panel {
  display: flex; flex-direction: column; gap: 40px;
  background: #1a1a1a; padding: 40px 30px; border-radius: 12px; border: 1px solid #333;
  align-items: center; min-width: 240px; margin-top: 0;
}

/* --- TOUCH STRIP --- */
.touch-strip-wrapper {
  display: flex; align-items: center; gap: 15px; width: 100%; max-width: 800px;
  padding: 0 10px;
}
.touch-strip-track {
  flex-grow: 1; height: 36px; background: #222; border: 2px solid #444; border-radius: 18px;
  position: relative; cursor: crosshair; touch-action: none; overflow: hidden;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.8);
}
.strip-indicator {
  position: absolute; top: 0; left: 50%; width: 4px; height: 100%;
  background: #00ffcc; box-shadow: 0 0 15px #00ffcc, 0 0 30px #00ffcc;
  transform: translateX(-50%); pointer-events: none; opacity: 0; 
  transition: opacity 0.2s, left 0.05s linear; /* Creates the "flow" effect */
}
.touch-strip-track.active .strip-indicator { opacity: 1; }

.strip-fx-controls { position: relative; width: 30px; height: 30px; }
.strip-btn { position: relative; top: 0; left: 0; right: 0; width: 30px; height: 30px; font-size: 14px; }


/* --- STRUCTURAL WRAPPERS --- */
.dial-and-pan-wrapper { 
  position: relative; display: flex; align-items: center; justify-content: center; 
}
.main-dial-container .dial-and-pan-wrapper { width: 140px; height: 140px; }
.sub-controls .dial-and-pan-wrapper { width: 110px; height: 110px; }

/* --- ILLUMINATED PAN RINGS --- */
.pan-ring { position: absolute; width: 100%; height: 100%; border-radius: 50%; pointer-events: none; z-index: 1; }

/* The Mask carves the inner area out, leaving a perfectly thin 4px ring */
.main-pan { 
  mask-image: radial-gradient(transparent 65px, black 66px, black 69px, transparent 70px);
  -webkit-mask-image: radial-gradient(transparent 65px, black 66px, black 69px, transparent 70px);
}
.seq-pan { 
  mask-image: radial-gradient(transparent 50px, black 51px, black 54px, transparent 55px);
  -webkit-mask-image: radial-gradient(transparent 50px, black 51px, black 54px, transparent 55px);
}

.pan-track {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%;
  background: conic-gradient(from 300deg, #444 0deg, #444 120deg, transparent 120deg);
}
.pan-fill {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%;
  /* The JS will dynamically inject the glowing gradient here */
}

/* Invisible hitboxes to capture your finger drags without triggering the dial */
.pan-hitbox {
  position: absolute; top: 0; left: 15%; width: 70%; height: 35px;
  pointer-events: auto; cursor: ew-resize; border-radius: 50% 50% 0 0; z-index: 20;
}

/* --- MAIN DRONE DIALS --- */
.main-dial-container { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.dial-octave-group { display: flex; align-items: center; gap: 8px; position: relative; z-index: 2; }
.dial-wrapper { position: relative; width: 100px; height: 100px; z-index: 2;} 
.dial-ring { 
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
  border-radius: 50%; background: #444; cursor: grab; box-shadow: 0 4px 10px rgba(0,0,0,0.5); 
}
.dial-ring::after { 
  content: ''; position: absolute; width: 4px; height: 24px; 
  background: #00ffcc; top: 6px; left: calc(50% - 2px); border-radius: 2px; 
}
.dial-toggle {
  --vol: 1; 
  position: absolute; width: 46px; height: 46px; top: 27px; left: 27px; 
  background: #222; border-radius: 50%; cursor: ns-resize; border: 2px solid #555;
  transition: all 0.2s; z-index: 10;
}
.dial-toggle.active { 
  background: rgba(0, 255, 204, var(--vol)); 
  border-color: rgba(0, 255, 204, var(--vol)); 
  box-shadow: 0 0 calc(15px * var(--vol)) rgba(0, 255, 204, var(--vol)); 
}

/* --- OCTAVE & WAVEFORM BUTTONS --- */
.octave-btn {
  background: #222; color: #aaa; border: 1px solid #555; border-radius: 50%;
  width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-weight: bold; font-size: 16px; transition: all 0.2s; padding: 0;
}
.octave-btn:hover { background: #444; color: #fff; border-color: #aaa; }
.octave-btn:active { background: #00ffcc; color: #000; box-shadow: 0 0 8px #00ffcc; border-color: #00ffcc; }

.wave-selector { display: flex; gap: 6px; margin-top: -6px; z-index: 2; }
.wave-btn {
  background: #333; border: 1px solid #555; border-radius: 4px;
  width: 32px; height: 26px; padding: 3px; cursor: pointer; 
  transition: all 0.2s; display: flex; align-items: center; justify-content: center;
}
.wave-btn svg {
  width: 100%; height: 100%; fill: none; stroke: #aaa; stroke-width: 2.5; 
  stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.2s;
}
.wave-btn:hover { background: #444; }
.wave-btn:hover svg { stroke: #fff; }
.wave-btn.active { background: #00ffcc; border-color: #00ffcc; box-shadow: 0 0 6px #00ffcc; }
.wave-btn.active svg { stroke: #222; }
.wave-selector .wave-btn:first-child, .wave-selector .wave-btn:last-child { transform: translateY(-16px); }
/* --- SUB CONTROLS (Sequencers) --- */
.sub-controls { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sub-dial-wrapper { position: relative; width: 76px; height: 76px; z-index: 2; } 
.sub-dial-ring { 
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
  border-radius: 50%; background: #333; cursor: grab; box-shadow: 0 2px 5px rgba(0,0,0,0.5); 
}
.sub-dial-ring::after { 
  content: ''; position: absolute; width: 3px; height: 16px; 
  background: #ff00cc; top: 4px; left: calc(50% - 1.5px); border-radius: 2px; 
}
.sub-dial-toggle {
  position: absolute; width: 38px; height: 38px; top: 19px; left: 19px; 
  background: #222; border-radius: 50%; cursor: pointer; border: 2px solid #555;
  transition: all 0.2s; z-index: 10; display: flex; align-items: center; justify-content: center; padding: 0;
}
.sub-dial-toggle.active { background: #ff00cc; border-color: #ff00cc; box-shadow: 0 0 8px #ff00cc; }
.sub-dial-value { font-size: 14px; font-weight: bold; pointer-events: none; color: #fff; }

/* --- REVERB TOGGLE BUTTONS --- */
.rvb-btn {
  position: absolute; 
  top: -10px;   /* Pushed up above the pan ring */
  right: -10px; /* Pushed out to the right */
  width: 24px; 
  height: 24px;
  background: #222; 
  color: #aaa;  /* Subtle grey text when off */
  font-size: 12px;
  font-weight: bold;
  border: 1px solid #555; 
  border-radius: 50%;
  cursor: pointer; 
  transition: all 0.2s; 
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.rvb-btn.active { 
  background: #00ff66; 
  color: #000;  /* Black text when active for high contrast */
  border-color: #00ff66; 
  box-shadow: 0 0 8px #00ff66; 
}

/* Slightly tighter positioning for the smaller sequencer dials */
.sub-controls .rvb-btn { 
  top: -8px; 
  right: -8px; 
  width: 20px; 
  height: 20px; 
  font-size: 10px; 
}

/* --- GLOBAL CONTROLS & REVERB DIALS --- */
.global-dials-row { display: flex; gap: 20px; justify-content: center; align-items: flex-end; width: 100%; }
.global-control-group { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.global-control-group label { font-size: 12px; font-weight: bold; color: #ccc; text-transform: uppercase; letter-spacing: 1px; }

.global-dial-wrapper { position: relative; width: 70px; height: 70px; }
.global-dial-ring { 
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
  border-radius: 50%; background: #444; cursor: grab; box-shadow: 0 4px 10px rgba(0,0,0,0.5); 
}
.global-dial-ring::after { 
  content: ''; position: absolute; width: 4px; height: 18px; 
  background: var(--accent); top: 5px; left: calc(50% - 2px); border-radius: 2px; 
}
.global-dial-value {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-size: 16px; font-weight: bold; pointer-events: none; color: #fff; z-index: 10;
}

/* --- STOP BUTTON --- */
#global-stop-btn {
  width: 100%; background: #222; color: #ff3333; border: 2px solid #555; border-radius: 8px;
  padding: 15px; font-size: 16px; font-weight: bold; letter-spacing: 2px; cursor: pointer;
  transition: all 0.2s; margin-top: 10px;
}
#global-stop-btn:active { background: #ff3333; color: #fff; border-color: #ff3333; box-shadow: 0 0 15px #ff3333; }

/* --- SCALE SELECTORS --- */
.scale-selector { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: 100%; }
.scale-btn {
  background: #333; color: #aaa; border: 1px solid #555; border-radius: 4px;
  font-size: 10px; padding: 8px 2px; cursor: pointer; transition: all 0.2s; font-weight: bold; text-align: center;
}
.scale-btn:hover { background: #444; color: #fff; }
.scale-btn.active { background: #ffcc00; color: #222; border-color: #ffcc00; box-shadow: 0 0 6px #ffcc00; }

/* --- DELAY TOGGLE BUTTONS --- */
.dly-btn {
  position: absolute; 
  top: -10px;   
  left: -10px; /* Mirrored to the left side */
  width: 24px; 
  height: 24px;
  background: #222; 
  color: #aaa;  
  font-size: 12px;
  font-weight: bold;
  border: 1px solid #555; 
  border-radius: 50%;
  cursor: pointer; 
  transition: all 0.2s; 
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.dly-btn.active { 
  background: #00ccff; 
  color: #000;  
  border-color: #00ccff; 
  box-shadow: 0 0 8px #00ccff; 
}
.sub-controls .dly-btn { top: -8px; left: -8px; width: 20px; height: 20px; font-size: 10px; }

/* --- FX MODE TOGGLE --- */
.fx-toggle-btn {
  background: #333; color: #aaa; border: 1px solid #555; border-radius: 6px;
  padding: 0; font-size: 14px; font-weight: bold; cursor: pointer; transition: all 0.2s;
  height: 70px; display: flex; align-items: center; justify-content: center; width: 100%;
}
.fx-toggle-btn.active { background: #00ccff; color: #000; border-color: #00ccff; box-shadow: 0 0 6px #00ccff; }