:root {
  --aca-navy: #17345f;
  --aca-blue: #275dad;
  --aca-teal: #087f78;
  --aca-ink: #172033;
  --aca-line: #c7d3e3;
  --aca-code-bg: #f4f7fb;
  --aca-alg-bg: #f5faf9;
  --aca-terminal: #101b2c;
}

.technical-block {
  border: 1px solid var(--aca-line);
  border-left: .28rem solid var(--aca-blue);
  border-radius: .32rem;
  background: var(--aca-code-bg);
  margin: 1rem 0;
  overflow: hidden;
}
.technical-block .technical-label {
  display: block;
  padding: .42rem .8rem .38rem;
  color: var(--aca-navy);
  background: #e7edf6;
  border-bottom: 1px solid var(--aca-line);
  font: 700 .76rem/1.2 system-ui, sans-serif;
  letter-spacing: .025em;
}
.technical-block div.sourceCode,
.technical-block pre {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.technical-block pre {
  padding: .72rem .9rem;
  overflow-x: auto;
  font-size: .88em;
  line-height: 1.42;
}
.technical-block.algorithm {
  border-left-color: var(--aca-teal);
  background: var(--aca-alg-bg);
}
.technical-block.algorithm .technical-label {
  color: #075e59;
  background: #dff1ee;
}
.technical-block.terminal {
  border-color: #263c5d;
  border-left-color: #65d4c8;
  background: var(--aca-terminal);
}
.technical-block.terminal .technical-label {
  color: #eaf8f6;
  background: #182a43;
  border-color: #324967;
}
.technical-block.terminal pre,
.technical-block.terminal code { color: #f2f6fb; }
.technical-block.program-output {
  border-left-color: #6d7787;
  background: #eef1f4;
}
.technical-block.configuration,
.technical-block.data-example { border-left-color: #7a5aa6; background: #f7f4fa; }
.technical-block.text-diagram,
.technical-block.inline-example,
.technical-block.technical-other { border-left-color: #8995a7; background: #f8f9fb; }
.technical-block.technical-compact { margin: .65rem 0; }
.technical-block.technical-compact pre { padding-top: .5rem; padding-bottom: .5rem; }

/* Preserve semantic MathML while allowing wide displays to remain readable. */
.math.display,
math[display="block"] {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

@media (max-width: 576px) {
  .technical-block { margin-left: 0; margin-right: 0; }
  .technical-block pre { font-size: .82em; padding: .65rem .72rem; }
  .technical-block.algorithm pre { white-space: pre-wrap; overflow-wrap: anywhere; }
}

@media (prefers-color-scheme: dark) {
  .technical-block:not(.terminal) { color: inherit; background: color-mix(in srgb, Canvas 92%, #275dad 8%); }
}