/* Vizaeo Visibility Demo — frontend styles */
.vz-demo{font-family:Sora,sans-serif;text-align:center}
.vz-demo .vz-mono{font-family:'Spline Sans Mono',monospace}

/* question panels — stacked in one grid cell so the stage keeps the height of
   the tallest question; switching questions never shifts the page */
.vz-stage{display:grid}
.vz-qpanel{grid-area:1/1;visibility:hidden;opacity:0;transition:opacity .45s ease}
.vz-qpanel.vz-active{visibility:visible;opacity:1}

/* prompt box */
.vz-pwrap{position:relative;max-width:680px;margin:0 auto 26px}
.vz-glow{position:absolute;inset:-2px;border-radius:18px;background:linear-gradient(90deg,rgba(26,99,198,.5),rgba(244,113,32,.5));filter:blur(12px);animation:vzGlow 3s ease infinite}
.vz-pbox{position:relative;display:flex;align-items:center;gap:14px;padding:18px 24px;background:rgba(255,255,255,.95);border:1px solid rgba(15,36,64,.12);border-radius:16px;text-align:left;box-shadow:0 12px 40px rgba(15,36,64,.08)}
.vz-pdot{width:9px;height:9px;border-radius:50%;background:#F47120;flex:0 0 auto}
.vz-ptxt{font-size:16px;color:#0F2440;flex:1 1 auto;min-width:0}
/* ghost keeps the line at its final width/height so typing never reflows it */
.vz-pstack{position:relative;display:block}
.vz-pghost{visibility:hidden;white-space:pre-wrap;word-break:break-word;display:block;padding-right:12px}
.vz-plivewrap{position:absolute;inset:0;white-space:pre-wrap;word-break:break-word;text-align:left}
.vz-caret{display:inline-block;width:9px;height:19px;background:#F47120;vertical-align:-3px;margin-left:2px;animation:vzBlink 1s step-end infinite}

/* answer cards */
.vz-cards{display:grid;grid-template-columns:repeat(var(--vz-cols,4),1fr);gap:14px;text-align:left}
.vz-card{display:flex;flex-direction:column;background:#fff;border:1px solid rgba(15,36,64,.1);border-radius:16px;padding:18px;min-height:210px;box-shadow:0 10px 30px rgba(15,36,64,.06)}
.vz-card-head{display:flex;align-items:center;gap:9px;margin-bottom:13px}
.vz-avatar{width:24px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex:0 0 auto}
.vz-cname{font-size:13px;font-weight:600;color:#0F2440}
.vz-cstat{margin-left:auto;font-family:'Spline Sans Mono',monospace;font-size:10px;color:#8496B0;white-space:nowrap}
.vz-cstat.on{color:#F47120}
/* ghost reserves the final answer height; the live layer streams on top of it */
.vz-cbody{position:relative;font-size:12.5px;line-height:1.7;color:#4E617E}
.vz-cghost{visibility:hidden;display:block}
.vz-clive{position:absolute;inset:0;display:block}
.vz-hl{background:rgba(244,113,32,.12);color:#D85E0F;font-weight:600;padding:0 4px;border-radius:4px}
/* verdict always occupies its row — appearing never shifts the card.
   Opacity only (no visibility): a child's visibility:visible would pierce
   the hidden state of an inactive question panel. */
.vz-verdict{margin-top:auto;padding-top:12px;font-family:'Spline Sans Mono',monospace;font-size:10.5px;opacity:0;transition:opacity .4s}
.vz-verdict.good{color:#1E9E5A}
.vz-verdict.bad{color:#D85E0F}
.vz-verdict.show{opacity:1}

/* score pill — fixed-width slots so ticking numbers/status don't resize it */
.vz-pillwrap{margin-top:30px}
.vz-pill{display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:34px;max-width:100%;padding:16px 30px;background:rgba(255,255,255,.9);border:1px solid rgba(15,36,64,.1);border-radius:999px;box-shadow:0 12px 34px rgba(15,36,64,.08)}
.vz-pill-item{display:flex;align-items:baseline;gap:10px}
.vz-pill-label{font-size:10.5px;letter-spacing:1.5px;color:#8496B0;white-space:nowrap}
.vz-pill-score{font-size:26px;font-weight:800;color:#F47120;display:inline-block;text-align:right;font-variant-numeric:tabular-nums}
.vz-pill-ment{font-size:26px;font-weight:800;color:#0F2440;font-variant-numeric:tabular-nums;display:inline-block;text-align:right}
.vz-ment-n{display:inline-block;min-width:1ch;text-align:right}
.vz-of{font-size:14px;color:#8496B0;font-weight:500}
.vz-sep{width:1px;height:24px;background:rgba(15,36,64,.12);flex:0 0 auto}
.vz-status{font-size:11px;color:#8496B0;display:inline-block;min-width:225px;text-align:left;white-space:nowrap}

@keyframes vzBlink{50%{opacity:0}}
@keyframes vzGlow{0%,100%{opacity:.55}50%{opacity:1}}

/* 5-across on wide screens degrades 5 → 3 → 2 → 1 instead of jumping to 2 */
@media(max-width:1120px){
  .vz-cards{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
  .vz-cards{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
  .vz-cards{grid-template-columns:1fr}
}
/* pill wraps before its ~763px single-line width would overflow a narrow viewport */
@media(max-width:860px){
  .vz-pill{gap:14px;border-radius:20px}
  .vz-status{min-width:0;text-align:center;white-space:normal}
}