body{
  background:#0b1020;
  color:#fff;
  font-family:Arial, sans-serif;
  text-align:center;
}

.hidden{display:none}

.top-ip{
  margin:12px;
  color:#6fd6ff;
  font-size:14px;
}

/* ===== METERS ===== */
.meters{
  display:flex;
  justify-content:space-around;
  margin-top:20px;
}

.meter-box{
  width:45%;
}

.meter{
  position:relative;
  width:180px;
  height:180px;
  border-radius:50%;
  border:6px solid #1e90ff;
  margin:0 auto;
}

.scale{
  position:absolute;
  inset:0;
  background:
    repeating-conic-gradient(
      #ffffff 0deg 2deg,
      transparent 2deg 10deg
    );
  border-radius:50%;
  opacity:.3;
}

.needle{
  position:absolute;
  width:4px;
  height:80px;
  background:red;
  left:50%;
  bottom:50%;
  transform-origin:bottom center;
  transform:rotate(-90deg);
  transition:transform .15s linear;
}

.value{
  margin-top:10px;
  font-size:22px;
}

/* ===== GRAPH ===== */
canvas{
  margin:15px auto;
  background:#ffffff10;
  border-radius:6px;
}

/* ===== BUTTON ===== */
button{
  padding:10px 25px;
  margin:10px;
  border:none;
  border-radius:6px;
  cursor:pointer;
  font-size:14px;
}
#start{background:#007bff;color:#fff}
#restart{background:#ff4040;color:#fff}

/* ===== DETAIL ===== */
.detail{
  margin-top:15px;
  line-height:1.8;
  font-size:14px;
}