:root{
  --bg:#0b1220;
  --panel:#0f1724;
  --accent:#60a5fa;
  --muted:#9aa6b2;
  --pad:#122233;
  --pad-active:#1f9fff;
  --radius:12px;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
body{
  background: linear-gradient(180deg,var(--bg), #16253a);
  color:#e6eef8;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

/* Drum machine container */
.machine{
  width:100%;
  max-width:980px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:14px;
  padding:18px;
  box-shadow:0 12px 40px rgba(2,6,23,0.6);
}

/* Header */
.machine-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}
.machine-header h1{margin:0;color:var(--accent)}
.hint{margin:0;color:var(--muted);font-size:0.9rem}

/* Body */
.machine-body{
  display:flex;
  gap:18px;
  align-items:flex-start;
}

/* Pads grid */
.pads{
  display:grid;
  grid-template-columns: repeat(3, 92px);
  grid-auto-rows: 92px;
  gap:12px;
  padding:8px;
}

/* Single pad */
.drum-pad{
  background: linear-gradient(180deg,var(--pad), #12283a);
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:1.25rem;
  letter-spacing:1px;
  color:#e6eef8;
  cursor:pointer;
  user-select:none;
  transition:transform .08s ease, box-shadow .08s ease;
  box-shadow: 0 6px 18px rgba(2,6,23,0.6);
}
.drum-pad:active,
.drum-pad.active{
  transform: translateY(2px);
  box-shadow: 0 3px 10px rgba(2,6,23,0.6);
  background: linear-gradient(180deg,var(--pad-active), #1a8cff);
  color:#04203a;
}

/* Display / controls */
.display-panel{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:200px;
  padding:8px;
}
.display{
  background: rgba(0,0,0,0.45);
  padding:12px;
  border-radius:10px;
  font-weight:700;
  text-align:center;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--accent);
  font-size:1.05rem;
}
.controls{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-weight:600;
}
.controls input[type="range"]{
  width:100%;
}

/* Footer */
.machine-footer{
  margin-top:12px;
  text-align:center;
  color:var(--muted);
  font-size:0.85rem;
}

/* Responsive */
@media (max-width:800px){
  .machine-body{flex-direction:column; align-items:center}
  .pads{grid-template-columns: repeat(3, 80px); grid-auto-rows: 80px}
}
@media (max-width:420px){
  .pads{grid-template-columns: repeat(3, 64px); grid-auto-rows: 64px; gap:8px}
  .drum-pad{font-size:1rem}
}