.visual-selection-hud {
  max-width: 100%;
  box-sizing: border-box;
  padding: 6px 9px;
  border: 1px solid #4d657b;
  border-radius: 8px;
  background: #0e1a27ed;
  box-shadow: 0 3px 12px #0004;
  color: #cadceb;
  font-size: 11px;
  line-height: 1.5;
  cursor: default;
  user-select: none;
}
.visual-selection-shortcuts {display: flex; gap: 4px 14px; flex-wrap: wrap; justify-content: flex-start;}
.visual-selection-shortcuts > span {white-space: nowrap;}
.visual-selection-hud kbd {
  font-family: inherit;
  font-weight: 700;
  color: #f2f8ff;
}
.visual-selection-state {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 6px;
  padding-top: 5px;
  border-top: 1px solid #3c5267;
}
.visual-selection-state .text-button {font-size: 11px; padding: 2px 0;}
#phase-list button[data-visual-marked=true] {
  background: color-mix(in srgb, var(--phase-outline) 26%, #142232);
  box-shadow: inset 0 0 0 1px var(--phase-outline);
}