/* Concept zoom (zoom-player.js). Colours fall back when the host page has no tokens. */
.zq {
  --zq-accent: var(--accent, #7c6afa);
  --zq-accent-2: var(--accent-2, #00d4aa);
  --zq-dot: var(--surface-2, #1a1a1a);
  --zq-line: var(--border, #1e1e1e);
  --zq-text: var(--text, #f0f0f0);
  --zq-muted: var(--text-muted, #888888);
  --zq-mono: var(--font-mono, ui-monospace, monospace);
  margin: 2rem 0 2.5rem;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}

.zq-stage {
  position: relative; overflow: hidden; contain: strict;
  width: min(100%, 620px, calc(100vh - 300px)); min-width: min(100%, 300px); aspect-ratio: 1;
  border-radius: 14px; border: 1px solid var(--zq-line); background: #fdfdfb;
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
}
.zq-layer { position: absolute; }
.zq-layer svg { display: block; width: 100%; height: 100%; }

.zq-hud { width: min(100%, 640px); text-align: center; }
.zq-dots { display: flex; justify-content: center; gap: 7px; margin-bottom: .5rem; }
.zq-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--zq-dot); transition: background .2s, transform .2s;
}
.zq-dot.done { background: var(--zq-accent); }
.zq-dot.cur { background: var(--zq-accent-2); transform: scale(1.35); }
.zq-step {
  margin: 0 0 .3rem; font-family: var(--zq-mono); font-size: .72rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--zq-accent-2);
}
.zq-caption { margin: 0 auto; max-width: 560px; min-height: 4.8em; font-size: .92rem; line-height: 1.6; color: var(--zq-muted); }
.zq-nav { display: flex; justify-content: center; align-items: center; gap: .5rem; margin-top: .6rem; }
.zq-btn {
  padding: .35rem .8rem; border-radius: 8px; border: 1px solid var(--zq-line);
  background: transparent; color: var(--zq-muted); font-size: .78rem; cursor: pointer;
  transition: border-color .2s, color .2s;
}
.zq-btn:hover:not(:disabled) { border-color: var(--zq-accent); color: var(--zq-text); }
.zq-btn:disabled { opacity: .35; cursor: default; }
.zq-pause { min-width: 6.2rem; }   /* same width for Pause and Resume, so the row doesn't shift */
.zq-pause[aria-pressed="true"] { border-color: var(--zq-accent-2); color: var(--zq-text); }
.zq-finished .zq-restart { border-color: var(--zq-accent-2); color: var(--zq-text); }
.zq-error { color: var(--zq-muted); }

@media (max-width: 640px) {
  .zq { margin-inline: -1rem; }
  .zq-caption { font-size: .86rem; }
}