.sandbox-ui-vu {
  --sandbox-vu-width: 14px;
  --sandbox-vu-height: 110px;
  --sandbox-vu-border: color-mix(in srgb, var(--sandbox-border) 86%, transparent);
  --sandbox-vu-bg: color-mix(in srgb, var(--sandbox-surface) 72%, var(--sandbox-ruler-bg));
  --sandbox-vu-low: var(--sandbox-success, #22c55e);
  --sandbox-vu-mid: var(--sandbox-warning, #f59e0b);
  --sandbox-vu-hot: var(--sandbox-danger, #ef4444);
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  width: var(--sandbox-vu-width);
  height: var(--sandbox-vu-height);
  border-left: 1px solid var(--sandbox-vu-border);
  border-right: 1px solid var(--sandbox-vu-border);
  border-radius: 2px;
  overflow: hidden;
  background:
    repeating-linear-gradient(
      to top,
      color-mix(in srgb, var(--sandbox-vu-border) 76%, transparent) 0 1px,
      transparent 1px 9px
    ),
    var(--sandbox-vu-bg);
}

.sandbox-ui-vu__fill {
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: 0;
  background: #22c55e;
  height: 0%;
  background:
    linear-gradient(
      to top,
      var(--sandbox-vu-low) 0%,
      var(--sandbox-vu-low) 58%,
      var(--sandbox-vu-mid) 82%,
      var(--sandbox-vu-hot) 100%
    );
  transition: height 72ms linear;
}

.sandbox-ui-vu__peak {
  position: absolute;
  left: 1px;
  right: 1px;
  height: 2px;
  border-radius: 1px;
  background: #ef4444;
  background: color-mix(in srgb, var(--sandbox-vu-hot) 92%, var(--sandbox-text));
  box-shadow: 0 0 4px color-mix(in srgb, var(--sandbox-vu-hot) 46%, transparent);
  bottom: 0;
  opacity: .9;
}