/* Distinguish commands entered by the reader from debugger output and prose. */
pre.command-block {
  background-color: #eef6ff !important;
  border: 1px solid #9ec5fe;
  border-left: 0.35rem solid #0d6efd;
  border-radius: 0.4rem;
  padding: 1rem;
}

pre.command-block code {
  color: #172b4d;
}

pre.command-output {
  background-color: #f6f8fa;
  border: 1px solid #d0d7de;
  border-left: 0.35rem solid #8c959f;
  border-radius: 0.4rem;
  padding: 1rem;
}

.callout.callout-style-default .callout-body > p:last-child {
  margin-bottom: 0;
}

/* Allow long identifiers such as SHA-256 values to wrap on narrow screens. */
main :not(pre) > code {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Full-width frame for the interactive cartridge archive view. */
.cartridge-viewer-frame {
  width: min(100%, 1180px);
  margin: 0 auto 1.25rem;
  overflow: hidden;
  border: 1px solid #303532;
  border-radius: 1rem;
  background: #080a09;
  box-shadow: 0 1.4rem 3.8rem rgba(20, 28, 23, 0.2);
}

.cartridge-viewer-frame iframe {
  display: block;
  width: 100%;
  height: min(72vh, 760px);
  min-height: 540px;
  border: 0;
}

@media (max-width: 640px) {
  .cartridge-viewer-frame {
    width: calc(100% + 1.5rem);
    margin-left: -0.75rem;
    border-radius: 0.75rem;
  }

  .cartridge-viewer-frame iframe {
    height: 68vh;
    min-height: 500px;
  }
}

/* Clearly separate third-party screenshots quoted for technical analysis. */
.quoted-figure {
  margin: 1.5rem 0;
  padding: 1rem;
  border: 1px solid #6c757d;
  border-left: 0.35rem solid #495057;
  border-radius: 0.4rem;
  background: #f8f9fa;
}

.quoted-figure img {
  display: block;
  margin: 0 auto 0.75rem;
  image-rendering: pixelated;
}

.quoted-figure p:last-child {
  margin-bottom: 0;
  font-size: 0.9rem;
}