#workflow {
  width: min(1040px, 96vw);
  max-height: 94dvh;
  padding: 0;
  border: 1px solid #516052;
  border-radius: 18px;
  background: #111915;
  color: #f7f8f2;
}
#workflow::backdrop { background: #080e0bd9; }
#workflow header, .workflow-toolbar, .workflow-panel { padding: 14px 20px; }
#workflow header, .workflow-toolbar { display: flex; justify-content: space-between; gap: 12px; }
#workflow header h2 { font-size: clamp(20px, 4vw, 32px); }
#workflow button, #workflow select {
  font: inherit;
  border-radius: 8px;
  padding: 8px;
}
#workflow-viewport { overflow: auto; background: #1e2422; }
#workflow-map { position: relative; }
#workflow-map img { display: block; width: 100%; height: auto; }
#workflow-map button {
  position: absolute;
  transform: translate(-50%, -50%);
  width: var(--node-width, 9%);
  height: 12%;
  padding: 0;
  border: 2px solid transparent;
  background: transparent;
  cursor: pointer;
}
#workflow-map button:is(:hover, :focus-visible, [aria-pressed=true]) {
  border-color: #d6e77a;
  background: #d6e77a22;
  box-shadow: 0 0 12px #d6e779aa;
}
#workflow-map button[data-complete=true] {
  border-color: #76b83c;
  box-shadow: 0 0 12px #76b83cbb;
}
.workflow-panel { display: grid; gap: 8px; }
.workflow-panel select { max-width: 100%; }
#workflow-result { color: #d6e77a; }
#workflow-map button[data-route=true] {
  border-color: #d6e77a;
  border-style: dashed;
}