*{box-sizing:border-box}
html,body,#root{height:100%;margin:0;padding:0}
body{
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:Inter,system-ui,Arial;
  background: linear-gradient(135deg,#fffbeb,#fff7ed);
  padding:20px;
}

#drum-machine{
  width: min(900px, 96%);
  display:grid;
  grid-template-columns: 1fr 360px;
  gap:20px;
  align-items:start;
}

.pads {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}

.drum-pad{
  background: linear-gradient(180deg,#fff 0%, #fff7f0 100%);
  border-radius:12px;
  box-shadow: 0 8px 18px rgba(20,20,20,0.08);
  padding:18px;
  text-align:center;
  user-select:none;
  cursor:pointer;
  font-weight:700;
  font-size:1.2rem;
  transition: transform .08s ease, box-shadow .08s ease;
}

.drum-pad:active,
.drum-pad.active{
  transform: translateY(2px) scale(.995);
  box-shadow: 0 6px 12px rgba(20,20,20,0.12);
}

.panel{
  background: rgba(255,255,255,0.95);
  border-radius:12px;
  padding:18px;
  box-shadow: 0 10px 30px rgba(20,20,20,0.08);
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:center;
}

#display{
  width:100%;
  min-height:80px;
  border-radius:8px;
  padding:12px 14px;
  background: linear-gradient(180deg,#fff7f0,#fffdfa);
  border:1px solid rgba(0,0,0,0.04);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  color:#5a3b00;
  text-align:center;
}

.title{
  font-size:1.1rem;
  font-weight:700;
  color:#3b2f00;
}

.small{
  font-size:0.86rem;
  color:#666;
}

@media(max-width:880px){
  #drum-machine{
    grid-template-columns: 1fr;
  }
  .panel{order:2}
}
@media(max-width:600px){
  .pads{
    grid-template-columns: repeat(2, 1fr);
  }
  .drum-pad{
    font-size:1rem;
    padding:14px;
  }
  #display{
    min-height:60px;
    font-size:0.9rem;
  }
}
@media(max-width:400px){
  .pads{
    grid-template-columns: 1fr;
  }
  .drum-pad{
    font-size:0.9rem;
    padding:12px;
  }
  #display{
    min-height:50px;
    font-size:0.8rem;
  }
}