/* ══════════════════════════════════════════════════════════════════
   voxel-qr.css
   Everything is namespaced under .vq so it won't collide with your
   existing page styles. Colours here are the frame only — the colours
   inside the scene live in voxel-qr.js under PALETTE.
   ══════════════════════════════════════════════════════════════════ */

/* 1. Center the buttons inside their wrapper */
.vq .hero__cta {
  display: flex;
  justify-content: center;
  gap: 16px; 
  margin-bottom: 32px;
}
.vq{
  width:100%;
  max-width:300px;
  margin:0 auto;
  font-family:inherit;
}

/* ── headings above the frame ─────────────────────────────────── */
.vq__title{
  font-size:clamp(22px,4.4vw,30px);
  font-weight:650;
  letter-spacing:-.02em;
  line-height:1.15;
  margin:0 0 6px;
}

.vq__sub{
  font-size:14px;
  line-height:1.55;
  opacity:.72;
  margin:0 0 18px;
  max-width:46ch;
}

/* keeps the layout from jumping when a heading is left blank */
.vq__title:empty,
.vq__sub:empty{display:none}

/* ── the scene ────────────────────────────────────────────────── */
.vq__stage{
  position:relative;
  aspect-ratio:1/1;
  border-radius:14px;
  overflow:hidden;
  background:#f2efe6;           /* must stay light: it shows through the
                                   seams between modules */
}
.vq__stage canvas{display:block;width:100%;height:100%}

/* ── caption drawn over the diorama, tree phase only ──────────── */
.vq__overlay{
  position:absolute;
  left:0;right:0;bottom:0;
  padding:20px 22px 22px;
  text-align:center;
  pointer-events:none;
  color:#1d2a19;
  background:linear-gradient(to top,rgba(242,239,230,.92) 30%,rgba(242,239,230,0));
  opacity:0;
}

.vq__overlay-line{
  font-size:clamp(15px,3.2vw,19px);
  font-weight:640;
  letter-spacing:-.01em;
  line-height:1.25;
  margin:0;
}

.vq__overlay-sub{
  font-size:clamp(11px,2.4vw,13px);
  line-height:1.45;
  color:#4b5946;
  margin:5px 0 0;
}

.vq__overlay-line:empty,
.vq__overlay-sub:empty{display:none}

/* ── shown if WebGL is unavailable or the link won't encode ───── */
.vq__fallback{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  text-align:center;
  font-size:13px;
  line-height:1.5;
  color:#5d6659;
  background:#f2efe6;
}
.vq__stage[data-failed="1"] .vq__fallback{display:flex}