*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial,sans-serif;
}

body{
  overflow:hidden;
}

.hero{
  width:100%;
  height:100vh;
  background:url('background.jpg') center center/cover no-repeat;
  position:relative;
}

.bottom-bar{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  background: #888;
  padding:14px 24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.radio-player{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.player-title{
  color:#fff;
  font-weight:bold;
  letter-spacing:1px;
}

.player-frame{
  width:420px;
  height:80px;
  border:none;
  border-radius:8px;
  background:#111;
}

.vumeters{
  display:flex;
  gap:18px;
  align-items:center;
}

.meter{
  width:170px;
  height:85px;
  background:linear-gradient(to top,#d7c28a,#f5e6b8);
  border:3px solid #6d5328;
  border-radius:6px;
  position:relative;
  overflow:hidden;
  box-shadow:0 0 10px rgba(0,0,0,.4);
}

.meter::before{
  content:"";
  position:absolute;
  width:140px;
  height:140px;
  border:2px solid rgba(0,0,0,.25);
  border-radius:50%;
  left:15px;
  top:18px;
}

.needle{
  position:absolute;
  width:70px;
  height:3px;
  background:#d10000;
  left:50%;
  bottom:18px;
  transform-origin:left center;
}

.needle-left{
  animation:swingLeft 1.1s infinite ease-in-out;
}

.needle-right{
  animation:swingRight 0.9s infinite ease-in-out;
}

.label{
  position:absolute;
  bottom:4px;
  left:50%;
  transform:translateX(-50%);
  font-weight:bold;
  font-size:18px;
}

@keyframes swingLeft{
  0%{ transform:rotate(-35deg);}
  50%{ transform:rotate(18deg);}
  100%{ transform:rotate(-20deg);}
}

@keyframes swingRight{
  0%{ transform:rotate(-28deg);}
  50%{ transform:rotate(25deg);}
  100%{ transform:rotate(-15deg);}
}