main {
  max-width: 53.75rem;
  margin: 0 auto;
}

pre {
  background: #f4f4f6;
  padding: 0.75rem;
  border-radius: 0.375rem;
  overflow: auto;
  white-space: pre-wrap;
}

img {
  max-width: 100%;
  height: auto;
}

.embed-area {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 1.125rem 0;
}

.embed-area iframe {
  width: 100%;
  height: 32.5rem;
  border: 1px solid #ddd;
  box-sizing: border-box;
  border-radius: 0.375rem;
}

.text-iframe-2col {
  display: grid;
  grid-template-columns: 1fr minmax(20rem, 36rem);
  gap: 1.125rem;
  align-items: start;
}

.text-iframe-2col .embed {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.text-iframe-2col .embed iframe {
  width: 100%;
  max-width: 36rem;
  height: 28.75rem;
  border: 1px solid #ddd;
  box-sizing: border-box;
  border-radius: 0.375rem;
}

/* Stack columns on narrow screens so content flows vertically */
@media (max-width: 760px) {
  .text-iframe-2col {
    grid-template-columns: 1fr !important;
  }

  .embed-area {
    grid-template-columns: 1fr !important;
  }

  .text-iframe-2col .embed iframe,
  .embed-area iframe {
    max-width: 100%;
    height: 460px;
  }
}

/* 30% / 70% layout for QR image (left) and JSON (right) */
.qr-json-2col {
  display: grid;
  grid-template-columns: 30% 70%;
  gap: 0.75rem;
  align-items: start;
}

.qr-json-2col img,
.qr-json-2col pre,
.qr-json-2col p {
  margin: 0;
}

@media (max-width: 760px) {
  .qr-json-2col {
    grid-template-columns: 1fr !important;
  }

  .qr-json-2col img,
  .qr-json-2col pre {
    width: 100%;
  }
}

.controls {
  margin: 0.5rem 0 1.125rem;
}

.controls button {
  margin-right: 0.5rem;
}