.phase,
.measure,
.view-controls,
.toolbox {
  border-color: rgba(116, 190, 255, 0.62);
  background: rgba(2, 12, 27, 0.48);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.28), inset 0 1px rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  backdrop-filter: blur(18px) saturate(145%);
}

.phase {
  background: rgba(2, 12, 27, 0.55);
}

.measure {
  background: rgba(2, 12, 27, 0.42);
}

.measure span {
  color: rgba(213, 229, 246, 0.76);
}

.view-controls {
  background: rgba(2, 12, 27, 0.38);
}

.view-controls button {
  background: transparent;
  border-right-color: rgba(116, 190, 255, 0.42);
}

.view-controls button:hover,
.view-controls .active {
  background: rgba(8, 124, 255, 0.48);
  box-shadow: inset 0 0 18px rgba(41, 200, 255, 0.16);
}

.toolbox {
  background: rgba(3, 15, 31, 0.64);
}

.tools button,
.toolbox footer button {
  border-color: rgba(116, 190, 255, 0.42);
  background: rgba(5, 24, 46, 0.42);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.06);
}

.tools button:hover,
.toolbox footer button:hover {
  border-color: rgba(41, 200, 255, 0.82);
  background: rgba(8, 78, 138, 0.42);
}

.tools button.active {
  border-color: #1686ff;
  background: rgba(8, 77, 139, 0.62);
  box-shadow: inset 0 0 22px rgba(41, 200, 255, 0.13), 0 0 16px rgba(8, 124, 255, 0.14);
}

.colors button {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
