.sandbox-page { padding: 40px 18px; max-width: 1040px; margin: 0 auto; }
.sandbox-header { text-align: center; margin-bottom: 40px; }
.sandbox-title { font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 20px; }
.controls-top { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.sandbox-grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 24px;
  align-items: start;
}

.grid-left, .grid-right { background: rgba(8,8,10,0.55); padding: 20px; border-radius: 0; backdrop-filter: blur(16px); }
.grid-center { display: flex; flex-direction: column; gap: 24px; }

.xy-pad, .wheel { border: 1px solid var(--accent-soft); cursor: crosshair; border-radius: 4px; }
.btn-control { 
  padding: 8px 16px; border: 1px solid var(--accent); background: rgba(126,231,255,0.1); 
  color: var(--text-main); border-radius: 4px; cursor: pointer; transition: all 0.2s;
}
.btn-control:hover { background: var(--accent-soft); }
.btn-control:disabled { opacity: 0.4; cursor: not-allowed; }

.synth-params { display: flex; flex-direction: column; gap: 8px; font-size: 12px; }
input[type=range] { width: 100%; }

.preview { margin-top: 12px; opacity: 0.8; font-size: 11px; }
#save-response { width: 100%; margin-top: 16px; }

@media (max-width: 980px) {
  .sandbox-grid { grid-template-columns: 1fr; }
}