.diagram-placement-choice {
  background:#fff!important;
  border:3px solid var(--purple)!important;
  border-radius:999px!important;
}
.diagram-placement-choice.selected {
  outline:5px solid var(--orange)!important;
  background:#fff4df!important;
}
.diagram-placement-choice.visual-arrow-choice {
  min-width:86px;
  font-size:2rem;
  line-height:1;
}
.diagram-placement-target {
  position:absolute;
  left:var(--x);
  top:var(--y);
  transform:translate(-50%,-50%);
  pointer-events:auto;
  min-width:50px;
  min-height:42px;
  max-width:190px;
  z-index:4;
  padding:6px 9px;
  border:3px dashed var(--orange);
  border-radius:11px;
  background:rgba(255,255,255,.92);
  color:var(--dark);
  font:inherit;
  font-size:.82rem;
  font-weight:800;
}
.diagram-placement-target.filled {
  border-style:solid;
  border-color:var(--green);
  background:#fff;
}
.diagram-placement-target.shape-arrow {
  width:112px;
  min-width:112px;
  height:44px;
  min-height:44px;
  padding:0;
  transform:translate(-50%,-50%) rotate(var(--rotation));
  border-color:transparent;
  background:transparent;
  font-size:0;
}
.diagram-placement-target.shape-arrow.filled {
  border-color:transparent;
  background:transparent;
  color:var(--orange);
  font-size:0;
}
.diagram-placement-target.shape-arrow.filled::before {
  content:"";
  position:absolute;
  left:3px;
  right:22px;
  top:19px;
  height:6px;
  border-radius:999px;
  background:var(--orange);
}
.diagram-placement-target.shape-arrow.filled::after {
  content:"";
  position:absolute;
  right:3px;
  top:9px;
  width:20px;
  height:20px;
  border-top:7px solid var(--orange);
  border-right:7px solid var(--orange);
  transform:rotate(45deg);
}
.diagram-placement-target.shape-star,
.diagram-placement-target.shape-circle {
  border-color:transparent;
  background:transparent;
  font-size:2rem;
  min-width:58px;
}
.diagram-placement-target.shape-star.filled,
.diagram-placement-target.shape-circle.filled {
  border-color:transparent;
  background:rgba(255,255,255,.72);
  color:var(--orange);
}
.diagram-placement-target.incorrect { animation:diagram-bounce .32s ease; }
@keyframes diagram-bounce {
  0%,100% { transform:translate(-50%,-50%); }
  35% { transform:translate(calc(-50% - 8px),-50%); }
  70% { transform:translate(calc(-50% + 8px),-50%); }
}
.diagram-instruction { margin-top:0; }
.diagram-placement-mode .diagram-stage canvas { pointer-events:none; cursor:default; }
.word-bank-choice {
  border:3px solid var(--purple);
  border-radius:999px;
  background:#fff;
  color:var(--dark);
  font:inherit;
  font-weight:800;
  padding:9px 15px;
  margin:5px;
}
.word-bank-choice.selected {
  outline:5px solid var(--orange);
  background:#fff4df;
}
.word-bank-choice.word-bank-return { animation:word-bank-return .4s ease; }
@keyframes word-bank-return {
  0% { transform:translateX(0); }
  25% { transform:translateX(18px); }
  55% { transform:translateX(-12px); }
  100% { transform:translateX(0); }
}
.inline-numbered-instructions {
  margin:.35rem 0;
  padding-left:2rem;
}
.inline-numbered-instructions li {
  margin:.45rem 0;
  padding-left:.35rem;
}
.blue-guide {
  border:3px solid var(--blue)!important;
  border-left-width:12px!important;
  background:#eef6ff!important;
}
.blue-guide h3,
.blue-guide strong { color:#174f86; }
html[data-pathway="paper"] .diagram-tools { display:none; }
html[data-pathway="paper"] .diagram-stage canvas { pointer-events:none; cursor:default; }
@media print {
  .diagram-tools { display:none!important; }
  .diagram-scroll { overflow:visible; }
  .diagram-stage { min-width:0; }
}