/* vesica's colors, and its live animation figures; loaded after the
   app-showcase layout's styles (_layouts/app-showcase.html) to adjust them */
:root {
  --accent: #b10d00;
  --accent-fill: #b10d00;
  --ink: #666666;
  --band: #141b21;
  --band-text: #eef3f6;
}
@media (prefers-color-scheme: dark) {
  :root { --accent: #ff7a6e; --accent-fill: #c4281b; --band: #0d1216; }
}
.band .eyebrow { color: #b5e9ff; }
.band .note { color: #a9b8c4; }
.live { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 20px; max-width: var(--wide); margin: 48px auto 0; padding: 0 24px; }
.live figure { margin: 0; }
.live img { display: block; width: 100%; height: auto; border-radius: 18px; background: #0b0f1a; }
.live figcaption { margin-top: 10px; font-size: 14px; text-align: center; color: #a9b8c4; }
.live + .note { margin-top: 40px; }