.dash-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.dash-wrap canvas {
  width: 100%;
  max-width: 720px;
  aspect-ratio: 2 / 1;
  background: #101526;
  border-color: #39436b;
  border-radius: 12px;
  image-rendering: auto;
}
.dash-legend {
  width: min(100%, 720px);
  display: flex;
  align-items: center;
  gap: 12px;
  color: #9299b6;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.dash-legend span { white-space: nowrap; }
.dash-progress {
  height: 4px;
  flex: 1;
  overflow: hidden;
  background: #2d344d;
  border-radius: 999px;
}
.dash-progress i {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--pink), var(--lime));
  border-radius: inherit;
  transition: width .12s linear;
}
.dash-control {
  margin-top: 12px;
  user-select: none;
  touch-action: none;
}
.dash-control:active {
  transform: translateY(1px);
  background: #dbff9c;
}
@media (max-width: 760px) {
  .dash-wrap canvas { border-radius: 8px; }
  .dash-legend { font-size: 10px; }
}