/* Quantum-Like Lab by Ethan Dickey. */
.ql-circuit-view {
  padding: 22px;
  color: var(--text, #edf2f8);
}
.ql-circuit-view h2 {
  margin: 0 0 10px;
  font-size: 1.2rem;
}
.ql-circuit-view h3 {
  font-size: 0.8rem;
  font-weight: 600;
  color: #c3cede;
  margin: 16px 0 0;
}
.ql-circuit-view p {
  line-height: 1.6;
}
.circuit-intro,
.circuit-note {
  font-size: 0.88rem;
  max-width: 80ch;
  color: #c2cede;
}
.circuit-key {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  font-size: 0.78rem;
  color: #d0d9e6;
}
.circuit-key span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.circuit-key i {
  width: 12px;
  height: 12px;
  border: 2px solid #80cafa;
  background: #122f43;
  border-radius: 3px;
}
.circuit-key i.graph {
  border-color: #f4be62;
  background: #4a361d;
}
.circuit-key i.barrier {
  border-color: #99a8bc;
  background: #263142;
  border-style: dashed;
}
.circuit-scroll {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  border: 1px solid #344458;
  border-radius: 12px;
  margin-top: 8px;
  background: #0d1522;
}
.circuit-score {
  display: block;
  max-width: none;
  font-family: inherit;
}
.circuit-wire {
  fill: none;
  stroke: #63758d;
  stroke-width: 1.5;
}
.circuit-wire-label {
  fill: #d4deeb;
  font-size: 12px;
}
.circuit-operation {
  cursor: pointer;
  outline: none;
}
.circuit-hit-area {
  fill: transparent;
  stroke: transparent;
  stroke-width: 1.5;
}
.circuit-operation:hover .circuit-hit-area {
  fill: #c9e4ff0b;
  stroke: #7387a1;
}
.circuit-operation:focus .circuit-hit-area {
  stroke: #e4f2ff;
  stroke-width: 2.5;
}
.circuit-operation.selected .circuit-hit-area {
  fill: #b0d5ff0c;
  stroke: #89aac8;
}
.circuit-operation .circuit-gate-box {
  fill: #173249;
  stroke: #80cafa;
  stroke-width: 2;
}
.circuit-operation.graph .circuit-gate-box {
  fill: #3d2e1b;
  stroke: #f4be62;
}
.circuit-gate-letter {
  text-anchor: middle;
  fill: #f1f6fb;
  font-weight: 700;
  font-size: 20px;
}
.circuit-pair-line,
.circuit-swap,
.circuit-target-cross {
  stroke: #80cafa;
  fill: none;
  stroke-width: 2.5;
}
.circuit-target {
  fill: #152b3d;
  stroke: #80cafa;
  stroke-width: 2.5;
}
.circuit-control {
  fill: #80cafa;
}
.circuit-operation.graph .circuit-pair-line,
.circuit-operation.graph .circuit-swap,
.circuit-operation.graph .circuit-target-cross,
.circuit-operation.graph .circuit-target {
  stroke: #f4be62;
}
.circuit-operation.graph .circuit-control {
  fill: #f4be62;
}
.circuit-operation.graph .circuit-target {
  fill: #3d2e1b;
}
.circuit-barrier {
  fill: #273445eb;
  stroke: #9ba9bd;
  stroke-width: 1;
  stroke-dasharray: 3 3;
}
.circuit-barrier-line {
  stroke: #8293aa;
  stroke-width: 2;
  stroke-dasharray: 3 4;
}
.circuit-event-label,
.circuit-kind-label,
.circuit-checkpoint-label {
  text-anchor: middle;
  fill: #d0dae7;
  font-size: 11px;
}
.circuit-event-label {
  font-weight: 600;
}
.circuit-kind-label {
  font-size: 10px;
  fill: #aebed1;
}
.circuit-operation.state .circuit-kind-label {
  fill: #a2d8fb;
}
.circuit-operation.graph .circuit-kind-label {
  fill: #f4ce8c;
}
.circuit-operation-list {
  border-top: 1px solid #344458;
  padding-top: 12px;
}
.circuit-operation-list summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: #d0dbea;
}
.circuit-operation-list li {
  margin-bottom: 14px;
}
.circuit-operation-list p {
  color: #c2cede;
  font-size: 0.84rem;
  margin: 7px 0;
}
.circuit-operation-list button[aria-current] {
  border-color: #88badf;
}
@media (max-width: 600px) {
  .ql-circuit-view {
    padding: 15px;
  }
  .circuit-intro,
  .circuit-note {
    font-size: 0.82rem;
  }
}