/* ──────────────────────────────────────────────────────────────────
 * Gopnik demo · UNIFIED design system (iter-N+18 M2.5)
 *
 * One source of truth for the visual language every demo + every
 * scenario card shares.  Loads BEFORE demo-shared.css so the
 * variables defined here are inheritable.
 *
 * Design principles
 *   • Dark cosmic canvas.  Never flat black; always a subtle radial
 *     glow + hex-grid haze to give depth.
 *   • Purple + cyan as the universal accents; each demo gets ONE
 *     additional accent (gold, magenta, green, blue) chosen for
 *     semantic + visual fit.
 *   • Typography hierarchy: Black Ops One stencil for wordmarks,
 *     Poppins for headlines, Inter for body, JetBrains Mono for
 *     technical / under-the-hood captions.
 *   • Every hero card has the same composition: eyebrow → headline
 *     → persona glyph → primitive icon → accent stripe → wordmark.
 *   • Motion respects prefers-reduced-motion.  Hover lift only on
 *     interactive surfaces (chips, cards with links).
 * ────────────────────────────────────────────────────────────────── */

:root {
  /* ── Canvas + ink ─────────────────────────────────────────── */
  --gn-canvas-0:        #0a0c16;       /* deepest navy */
  --gn-canvas-1:        #0c1023;       /* card surface 1 */
  --gn-canvas-2:        #141832;       /* card surface 2 (hover) */
  --gn-ink:             #f4f7fb;
  --gn-ink-muted:       rgba(244, 247, 251, 0.62);
  --gn-ink-soft:        rgba(244, 247, 251, 0.42);

  /* ── Signature accents ────────────────────────────────────── */
  --gn-purple:          #a78bfa;
  --gn-purple-dim:      #8b5cf6;
  --gn-cyan:            #22d3ee;
  --gn-cyan-dim:        #67e8f9;
  --gn-gold:            #fcd34d;
  --gn-green:           #34d399;
  --gn-magenta:         #ec4899;
  --gn-blue:            #5fb3ff;

  /* ── Gradient atoms ───────────────────────────────────────── */
  --gn-grad-signature:
      linear-gradient(135deg, var(--gn-purple) 0%, var(--gn-cyan) 100%);
  --gn-grad-card:
      linear-gradient(160deg, rgba(20,20,36,.92) 0%, rgba(12,12,24,.96) 100%);
  --gn-grad-hero:
      radial-gradient(ellipse at 15% 10%, rgba(167,139,250,.20), transparent 55%),
      radial-gradient(ellipse at 90% 95%, rgba(34,211,238,.16), transparent 55%),
      linear-gradient(155deg, #0c1023 0%, #0a0c16 100%);

  /* ── Strokes + glows ──────────────────────────────────────── */
  --gn-stroke-soft:     rgba(139, 92, 246, 0.18);
  --gn-stroke-strong:   rgba(167, 139, 250, 0.45);
  --gn-stroke-hover:    rgba(252, 211, 77, 0.55);
  --gn-glow-purple:     0 18px 50px -28px rgba(167, 139, 250, 0.55);
  --gn-glow-gold:       0 18px 50px -28px rgba(252, 211, 77, 0.55);

  /* ── Per-demo accents (default; overridden by --gn-accent on
       any container that sets [data-demo]) ──────────────────── */
  --gn-accent:          var(--gn-purple);
  --gn-accent-2:        var(--gn-cyan);

  /* ── Type stack ───────────────────────────────────────────── */
  --gn-font-wordmark:   "Black Ops One", "Impact", "Arial Black", sans-serif;
  --gn-font-headline:   "Poppins", "Inter", system-ui, sans-serif;
  --gn-font-body:       "Inter", "SF Pro Display", system-ui, sans-serif;
  --gn-font-mono:       "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
}

/* ── Per-demo accent overrides — the unified system in action. */
[data-demo="bridge"]       { --gn-accent: var(--gn-blue);       --gn-accent-2: var(--gn-purple); }
[data-demo="ecosystem"]    { --gn-accent: var(--gn-purple);     --gn-accent-2: var(--gn-cyan);   }
[data-demo="multisig"]     { --gn-accent: var(--gn-gold);       --gn-accent-2: var(--gn-purple);}
[data-demo="tokenization"] { --gn-accent: var(--gn-magenta);    --gn-accent-2: var(--gn-gold);  }
[data-demo="swap"]         { --gn-accent: var(--gn-green);      --gn-accent-2: var(--gn-cyan);  }
[data-demo="ai_x402"]      { --gn-accent: var(--gn-purple-dim); --gn-accent-2: var(--gn-magenta);}

/* ════════════════════════════════════════════════════════════════════
 * Unified hero card — used by every scenario chip + the larger hero
 * panel.  Scales by setting font-size / width on the container.
 * ══════════════════════════════════════════════════════════════════ */

.gn-hero-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: var(--gn-grad-hero);
  border: 1px solid var(--gn-stroke-soft);
  isolation: isolate;
}

/* Hex-grid haze layer — drawn via repeating linear gradients so we
 * don't need a separate asset.  Masked by a radial gradient so it
 * fades toward the corners. */
.gn-hero-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 35%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at 50% 35%, #000 30%, transparent 75%);
  z-index: 0;
}

/* Accent glow — uses the per-demo --gn-accent / --gn-accent-2. */
.gn-hero-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 78% 100%,
      color-mix(in srgb, var(--gn-accent) 32%, transparent), transparent 55%),
    radial-gradient(ellipse at 12% 0%,
      color-mix(in srgb, var(--gn-accent-2) 22%, transparent), transparent 55%);
  z-index: 0;
}

/* Bottom accent stripe — the signature element on every card. */
.gn-hero-card .gn-hero-stripe {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--gn-accent) 80%, transparent) 0%,
    color-mix(in srgb, var(--gn-accent-2) 80%, transparent) 100%);
  z-index: 2;
}

/* Top-right Gopnik wordmark — same on every card. */
.gn-hero-card .gn-hero-wordmark {
  position: absolute; top: 10px; right: 12px; z-index: 3;
  font-family: var(--gn-font-wordmark);
  font-size: 0.66rem; letter-spacing: 0.10em;
  color: color-mix(in srgb, var(--gn-ink) 75%, transparent);
  text-transform: uppercase;
}

/* Top-left persona badge (NEWCOMER/BUSINESS/POWER USER). */
.gn-hero-card .gn-hero-badge {
  position: absolute; top: 10px; left: 12px; z-index: 3;
  padding: 2px 8px;
  font-family: var(--gn-font-mono);
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gn-accent) 12%, transparent);
  color: var(--gn-accent);
  border: 1px solid color-mix(in srgb, var(--gn-accent) 35%, transparent);
}

/* Centre composition — persona glyph + primitive icon ride here. */
.gn-hero-card .gn-hero-stage {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  gap: 14px;
  padding: 28px 18px 14px;
  min-height: 76px;
}

/* Persona avatar disc — the emoji sits inside a coloured ring. */
.gn-hero-card .gn-hero-persona {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 1.6rem;
  background: color-mix(in srgb, var(--gn-accent) 14%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--gn-accent) 50%, transparent);
  box-shadow: 0 0 18px -4px color-mix(in srgb, var(--gn-accent) 45%, transparent);
  flex-shrink: 0;
}

/* Primitive glyph (bridge / orbit / keys / coin / swap / agent) — SVG. */
.gn-hero-card .gn-hero-primitive {
  width: 44px; height: 44px;
  color: var(--gn-accent);
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--gn-accent) 35%, transparent));
  flex-shrink: 0;
}
.gn-hero-card .gn-hero-primitive svg { width: 100%; height: 100%; }

/* The "—" arc connecting persona ↔ primitive. */
.gn-hero-card .gn-hero-link {
  width: 22px; height: 2px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--gn-accent) 70%, transparent) 0%,
    color-mix(in srgb, var(--gn-accent-2) 70%, transparent) 100%);
  border-radius: 2px;
  opacity: 0.7;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════════
 * Unified primitive SVG sprite — defined once, used everywhere.
 * Embed by adding <svg class="gn-svg-sprite"><use href="#gn-glyph-X"/></svg>
 * after pasting the <symbol> defs (see _v2_chrome.html top-of-file).
 * ══════════════════════════════════════════════════════════════════ */

.gn-svg-defs   { position: absolute; width: 0; height: 0; overflow: hidden; }
.gn-svg-sprite { display: block; width: 100%; height: 100%; }

/* ════════════════════════════════════════════════════════════════════
 * Override the previous gradient-only chip fallback so chips now
 * pick up the unified hero composition automatically.
 * ══════════════════════════════════════════════════════════════════ */

.gn-scenario-chip {
  /* keep existing card chrome from demo-shared.css */
  background: var(--gn-grad-card);
}

/* The chip's art panel now hosts the unified hero composition.
 * Background gradient + hex grid + glow all come from .gn-hero-card. */
.gn-scenario-chip-art {
  position: relative;
  height: 130px;
  overflow: hidden;
  /* If a Canva PNG is set as background-image (inline style), it
   * sits ABOVE the gradient — when no PNG, the gradient + symbols
   * show through. */
}

.gn-scenario-chip.is-active {
  border-color: var(--gn-stroke-hover);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--gn-accent) 50%, transparent),
    0 18px 50px -24px color-mix(in srgb, var(--gn-accent) 55%, transparent);
}

/* ════════════════════════════════════════════════════════════════════
 * Unified business-tab styling — picks up demo accent automatically.
 * Replaces the previous fixed purple variant per card.
 * ══════════════════════════════════════════════════════════════════ */

.gn-biz-card .gn-biz-card-metric {
  background: color-mix(in srgb, var(--gn-accent) 14%, transparent);
  color: var(--gn-accent);
}

/* ════════════════════════════════════════════════════════════════════
 * Reduced motion + responsive
 * ══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .gn-hero-card,
  .gn-hero-card::before,
  .gn-hero-card::after { transition: none !important; }
}
@media (max-width: 520px) {
  .gn-hero-card .gn-hero-persona,
  .gn-hero-card .gn-hero-primitive { width: 38px; height: 38px; font-size: 1.3rem; }
}

/* ════════════════════════════════════════════════════════════════════
 * M3 (iter-N+18) — UNIFIED HERO STRIP per demo page.
 * Replaces the per-demo bespoke heros with a single design-system
 * pattern showing persona portrait + scenario title + stats.
 * ══════════════════════════════════════════════════════════════════ */

.gn-hero-strip { margin-bottom: 32px; }
.gn-hero-strip-card {
  padding: 0;
  min-height: 188px;
}
.gn-hero-strip-body {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 28px;
  padding: 56px 28px 32px;
  align-items: center;
}
.gn-hero-strip-avatar {
  display: flex; align-items: center; justify-content: center; gap: 14px;
}
.gn-hero-strip-avatar .gn-hero-persona {
  width: 72px; height: 72px; font-size: 2.4rem;
}
.gn-hero-strip-avatar .gn-hero-primitive {
  width: 72px; height: 72px;
}
.gn-hero-strip-avatar .gn-hero-link { width: 32px; height: 2px; }
.gn-hero-strip-copy { min-width: 0; }
.gn-hero-strip-title {
  margin: 0 0 8px;
  font-family: var(--gn-font-headline);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 700; color: var(--gn-ink);
  letter-spacing: -0.01em; line-height: 1.15;
}
.gn-hero-strip-pain {
  margin: 0 0 14px;
  color: var(--gn-ink-muted); font-size: 0.96rem; line-height: 1.55;
  max-width: 64ch;
}
.gn-hero-strip-pain strong {
  color: var(--gn-accent);
  font-weight: 700; letter-spacing: 0.02em;
}
.gn-hero-strip-stats {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.gn-hero-strip-stat {
  padding: 5px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gn-accent) 10%, transparent);
  color: var(--gn-ink);
  border: 1px solid color-mix(in srgb, var(--gn-accent) 28%, transparent);
  font-family: var(--gn-font-mono);
  font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.02em;
}
.gn-hero-strip-stat strong {
  color: var(--gn-accent); font-weight: 700;
}

@media (max-width: 720px) {
  .gn-hero-strip-body { grid-template-columns: 1fr; padding: 56px 20px 24px; gap: 18px; }
  .gn-hero-strip-avatar { justify-content: flex-start; }
}

/* ════════════════════════════════════════════════════════════════════
 * M3 (iter-N+18) — SCENE TIMELINE SCRUBBER.
 * Horizontal dot strip below the chip picker.  Click any dot to jump.
 * Uses the demo's accent for the active + complete states.
 * ══════════════════════════════════════════════════════════════════ */

.gn-demo-timeline-section {
  margin: 12px 0 20px;
}
.gn-tl-wrap {
  background: var(--gn-grad-card);
  border: 1px solid var(--gn-stroke-soft);
  border-radius: 14px;
  padding: 14px 18px;
  display: flex; align-items: center; gap: 14px;
  position: relative;
  overflow-x: auto;
}
.gn-tl-label {
  flex-shrink: 0;
  font-family: var(--gn-font-mono);
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--gn-ink-muted);
  padding-right: 12px;
  border-right: 1px solid var(--gn-stroke-soft);
}
.gn-tl {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex: 1;
  gap: 6px;
  align-items: center;
  min-width: 0;
}
.gn-tl-item {
  flex: 1 1 auto;
  position: relative;
  display: flex; align-items: center;
  min-width: 0;
}
.gn-tl-item::after {
  content: ""; position: absolute;
  top: 50%; right: -6px;
  width: 6px; height: 2px;
  background: var(--gn-stroke-soft);
  transform: translateY(-50%);
}
.gn-tl-item:last-child::after { display: none; }
.gn-tl-item.is-complete::after,
.gn-tl-item.is-active::after {
  background: color-mix(in srgb, var(--gn-accent) 70%, transparent);
}

.gn-tl-dot {
  display: flex; align-items: center; gap: 8px;
  background: transparent;
  border: 1px solid var(--gn-stroke-soft);
  border-radius: 999px;
  color: var(--gn-ink-muted);
  font: inherit;
  padding: 6px 12px 6px 6px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  width: 100%; min-width: 0;
}
.gn-tl-dot:hover {
  color: var(--gn-ink);
  border-color: color-mix(in srgb, var(--gn-accent) 50%, transparent);
  background: color-mix(in srgb, var(--gn-accent) 6%, transparent);
}
.gn-tl-num {
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--gn-accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--gn-accent) 28%, transparent);
  color: var(--gn-ink-muted);
  font-family: var(--gn-font-mono);
  font-size: 0.68rem; font-weight: 700;
  transition: background .15s, color .15s, border-color .15s;
}
.gn-tl-title {
  font-size: 0.78rem;
  font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
  letter-spacing: -0.005em;
}

/* Active dot — fully accent-coloured, pulsing glow. */
.gn-tl-item.is-active .gn-tl-dot {
  background: color-mix(in srgb, var(--gn-accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--gn-accent) 55%, transparent);
  color: var(--gn-ink);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gn-accent) 35%, transparent),
              0 0 18px -4px color-mix(in srgb, var(--gn-accent) 50%, transparent);
}
.gn-tl-item.is-active .gn-tl-num {
  background: var(--gn-accent);
  border-color: var(--gn-accent);
  color: var(--gn-canvas-0);
}

/* Completed dot — muted accent fill. */
.gn-tl-item.is-complete .gn-tl-dot {
  border-color: color-mix(in srgb, var(--gn-accent) 40%, transparent);
  color: var(--gn-ink-muted);
}
.gn-tl-item.is-complete .gn-tl-num {
  background: color-mix(in srgb, var(--gn-accent) 22%, transparent);
  border-color: color-mix(in srgb, var(--gn-accent) 50%, transparent);
  color: var(--gn-accent);
}

@media (max-width: 720px) {
  .gn-tl-title { display: none; }
  .gn-tl-dot { padding: 6px; width: 36px; height: 36px; justify-content: center; }
  .gn-tl-num { width: 24px; height: 24px; }
  .gn-tl-label { padding-right: 10px; }
}

/* ════════════════════════════════════════════════════════════════════
 * M5 (iter-N+18) — ILLUSTRATED JOURNEY MAP.
 * The scrubber renders as a horizontal strip of milestone cards,
 * each with its scene-archetype glyph + numbered step + title.
 * Replaces the M3 numbered-dot scrubber when the .gn-tl--journey
 * modifier is set on the <ol>.
 * ══════════════════════════════════════════════════════════════════ */

.gn-tl--journey .gn-tl-item { flex: 1 1 0; min-width: 130px; }

.gn-tl--journey .gn-tl-dot {
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--gn-stroke-soft);
  background: var(--gn-grad-card);
  text-align: center;
  transition: transform .2s ease, border-color .18s, box-shadow .25s, background .18s;
}
.gn-tl--journey .gn-tl-dot:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--gn-accent) 55%, transparent);
  background: linear-gradient(160deg,
                rgba(20,20,36,.92),
                color-mix(in srgb, var(--gn-accent) 8%, rgba(12,12,24,.96)));
  box-shadow: 0 14px 32px -18px color-mix(in srgb, var(--gn-accent) 55%, transparent);
}

/* The glyph disc — the new heart of every milestone. */
.gn-tl--journey .gn-tl-glyph {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--gn-accent) 10%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--gn-accent) 28%, transparent);
  color: color-mix(in srgb, var(--gn-accent) 75%, var(--gn-ink-muted));
  flex-shrink: 0;
  transition: background .18s, border-color .18s, color .18s,
              transform .25s ease, box-shadow .25s;
}
.gn-tl--journey .gn-tl-glyph svg { width: 30px; height: 30px; }
.gn-tl--journey .gn-tl-dot:hover .gn-tl-glyph {
  transform: scale(1.06);
}

/* Meta column — step number + title, stacked under the glyph. */
.gn-tl--journey .gn-tl-meta {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 0;
}
.gn-tl--journey .gn-tl-num {
  width: auto; height: auto; padding: 2px 8px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--gn-stroke-soft);
  color: var(--gn-ink-muted);
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.10em;
}
.gn-tl--journey .gn-tl-title {
  font-size: 0.78rem; font-weight: 600;
  color: var(--gn-ink-muted);
  white-space: normal;            /* allow short wraps in narrow chips */
  word-break: break-word;
  line-height: 1.25;
  text-align: center;
  max-width: 12ch;
}

/* Inter-step connector — replaced the M3 line stub with a glowing arc. */
.gn-tl--journey .gn-tl-item::after {
  top: 38px; right: -10px;       /* line up with the centre of the glyph */
  width: 20px; height: 2px;
}

/* Active milestone — fully accent-coloured, glow, lifted. */
.gn-tl--journey .gn-tl-item.is-active .gn-tl-dot {
  background: linear-gradient(160deg,
              color-mix(in srgb, var(--gn-accent) 12%, rgba(20,20,36,.92)),
              color-mix(in srgb, var(--gn-accent) 4%,  rgba(12,12,24,.96)));
  border-color: color-mix(in srgb, var(--gn-accent) 55%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--gn-accent) 35%, transparent),
    0 16px 36px -16px color-mix(in srgb, var(--gn-accent) 55%, transparent);
}
.gn-tl--journey .gn-tl-item.is-active .gn-tl-glyph {
  background: color-mix(in srgb, var(--gn-accent) 22%, transparent);
  border-color: var(--gn-accent);
  color: var(--gn-accent);
  box-shadow: 0 0 22px -2px color-mix(in srgb, var(--gn-accent) 55%, transparent);
}
.gn-tl--journey .gn-tl-item.is-active .gn-tl-num {
  background: var(--gn-accent);
  border-color: var(--gn-accent);
  color: var(--gn-canvas-0);
}
.gn-tl--journey .gn-tl-item.is-active .gn-tl-title {
  color: var(--gn-ink);
}

/* Completed milestones — filled glyph disc, dimmer text. */
.gn-tl--journey .gn-tl-item.is-complete .gn-tl-glyph {
  background: color-mix(in srgb, var(--gn-accent) 16%, transparent);
  border-color: color-mix(in srgb, var(--gn-accent) 45%, transparent);
  color: var(--gn-accent);
}
.gn-tl--journey .gn-tl-item.is-complete .gn-tl-num {
  border-color: color-mix(in srgb, var(--gn-accent) 35%, transparent);
  color: color-mix(in srgb, var(--gn-accent) 70%, var(--gn-ink-muted));
}

/* Mobile fallback — keep the glyph, drop the title to icon-only. */
@media (max-width: 720px) {
  .gn-tl--journey .gn-tl-item { flex: 0 0 auto; min-width: 0; }
  .gn-tl--journey .gn-tl-title { display: none; }
  .gn-tl--journey .gn-tl-dot {
    padding: 10px;
    border-radius: 14px;
  }
  .gn-tl--journey .gn-tl-glyph { width: 48px; height: 48px; }
  .gn-tl--journey .gn-tl-glyph svg { width: 26px; height: 26px; }
}

/* M5: less-text cinematic canvases.  The journey map below the
 * canvas now carries the narrative, so secondary text in the SVGs
 * fades back so the visuals can carry the moment.  Per-demo CSS
 * still wins where it sets explicit styles. */
[data-demo] .gn-node-cap-sub,
[data-demo] .gnd-svc-label:not(.gnd-svc-label--lit) {
  opacity: 0.7;
}

/* ════════════════════════════════════════════════════════════════════
 * M3 (iter-N+18) — Cinematic canvas picks up demo accent.
 * Every demo's cinematic SVG can read --gn-accent so the bridge nodes,
 * orbit chains, multisig signers etc. tint to the demo's accent —
 * no per-demo override needed.  Existing per-demo CSS still wins where
 * it sets explicit colours; this just provides the default.
 * ══════════════════════════════════════════════════════════════════ */

.gn-demo-canvas, .gnd-canvas {
  /* Bridge / generic canvas inherits the demo accent via the parent. */
  --gn-cinematic-accent: var(--gn-accent);
}

/* Bridge demo SVG primitives — opt-in tinting. */
[data-demo="bridge"] .gn-rail--xrpl,
[data-demo="bridge"] .gn-node-glow,
[data-demo="bridge"] .gn-attestor-orbit {
  /* Already keyed to --gnd-xrpl in the bridge CSS; this is a no-op
   * unless the bridge CSS migrates to --gn-accent. */
}

/* Particle + pulse colours fall back to the accent when not overridden. */
.gn-particle { fill: var(--gn-accent); }
.gn-pulse-label { fill: var(--gn-accent); }