/* ── Ecosystem visuals (js/visuals/kit.js) ─────────────────────────────────────
   Standalone: relies only on the base tokens (--bg, --surface, --text*, --accent*,
   --border*, --gold, --mono, --sans, --display) that both css/styles.css and
   index.html's inline block define. Nothing here lives in styles.css, so the
   two token copies cannot drift through this file.

   --vis-* tokens are declared on .vis itself, not on :root. A custom property
   that aliases another (--x: var(--y)) resolves where it is DECLARED; declared
   on :root it would freeze the dark value and inherit it into the light theme.
   Declared on .vis, it resolves against whichever theme .vis sits in.

   Light theme follows "premium = restraint": one hue varied by weight, glow
   nearly gone, deep-tone glyphs on white nodes, hairline edges. */

.vis{
  --vis-ink:var(--text);
  --vis-ink2:var(--text2);
  --vis-muted:var(--text3);
  --vis-hair:var(--border);
  --vis-line:var(--border2);
  --vis-line-strong:var(--border3);
  --vis-accent:var(--accent);
  --vis-hi:var(--accent3);
  --vis-deep:var(--accent-dark);
  --vis-node:var(--surface);
  --vis-node2:var(--bg2);
  --vis-ground:var(--bg);
  --vis-glow:rgba(29,217,232,.38);
  --vis-glow-soft:rgba(15,168,176,.16);
  --vis-gold:var(--gold);
  --vis-stroke-hi:1.5;
  position:relative;z-index:2;margin:2.5rem auto 0;width:100%;
  container-type:inline-size;container-name:vis;
}
[data-theme="light"] .vis{
  --vis-hi:var(--accent-dark);
  --vis-glow:rgba(10,138,145,.14);
  --vis-glow-soft:rgba(10,138,145,.07);
  --vis-stroke-hi:1.75;
}

/* The stage reserves its box before any script runs: no layout shift. */
.vis-stage{
  position:relative;width:100%;aspect-ratio:var(--ar,16/9);
  border:1px solid var(--vis-hair);border-radius:16px;overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% 0%,var(--vis-glow-soft),transparent 60%),
    linear-gradient(180deg,var(--vis-node2),var(--vis-ground));
  box-shadow:inset 0 1px 0 var(--edge-light,rgba(255,255,255,.06));
}
@container vis (min-width:640px) and (max-width:899px){
  .vis-stage{aspect-ratio:var(--ar-t,var(--ar,16/9))}
}
@container vis (max-width:639px){
  .vis-stage{aspect-ratio:var(--ar-m,var(--ar,4/5));border-radius:12px}
}
.vis-stage > canvas,.vis-stage > svg,.vis-stage > .vis-layer{
  position:absolute;inset:0;width:100%;height:100%;display:block
}
.vis-layer{pointer-events:none}

/* "Illustrative simulation" - static HTML so it shows without script and is read by screen readers. */
.vis-tag{
  position:absolute;top:.8rem;right:.8rem;z-index:3;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--vis-ink2);background:color-mix(in srgb,var(--vis-node) 82%,transparent);
  border:1px solid var(--vis-line);border-radius:999px;padding:.28rem .65rem;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);pointer-events:none
}
.vis-cap{
  margin:.9rem auto 0;max-width:62ch;text-align:center;
  font-size:.82rem;line-height:1.6;color:var(--vis-muted)
}
@container vis (max-width:639px){ .vis-tag{top:.55rem;right:.55rem;font-size:.56rem} }

/* ── SVG vocabulary shared by every SVG visual ── */
.vis svg text{font-family:var(--mono);fill:var(--vis-ink2)}
.vis .v-title{font-family:var(--display);font-weight:700;fill:var(--vis-ink)}
.vis .v-label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;fill:var(--vis-muted)}
.vis .v-value{font-weight:600;fill:var(--vis-ink)}
.vis .v-hi{fill:var(--vis-hi)}
.vis .v-node{fill:var(--vis-node);stroke:var(--vis-line);stroke-width:1}
.vis .v-node-hi{fill:var(--vis-node);stroke:var(--vis-accent);stroke-width:var(--vis-stroke-hi)}
.vis .v-edge{fill:none;stroke:var(--vis-line);stroke-width:1}
.vis .v-edge-dash{fill:none;stroke:var(--vis-line);stroke-width:1;stroke-dasharray:3 5}
.vis .v-edge-live{fill:none;stroke:var(--vis-accent);stroke-width:var(--vis-stroke-hi);opacity:0;transition:opacity .35s ease}
.vis .v-edge-live.on{opacity:1}
.vis .v-packet{fill:var(--vis-hi)}
.vis .v-halo{fill:var(--vis-glow)}
.vis .v-ring{fill:none;stroke:var(--vis-hi);stroke-width:1.25}
.vis .v-muted{fill:var(--vis-muted)}
.vis .v-chip{fill:var(--vis-node2);stroke:var(--vis-line);stroke-width:1;transition:stroke .3s ease,fill .3s ease}
.vis .v-chip.on{stroke:var(--vis-accent);fill:color-mix(in srgb,var(--vis-accent) 12%,var(--vis-node))}
.vis .v-chip-text{font-size:10.5px;letter-spacing:.06em;fill:var(--vis-ink2);transition:fill .3s ease}
.vis .v-chip.on + .v-chip-text,.vis .v-chip-text.on{fill:var(--vis-ink)}
.vis .v-lane{fill:none;stroke:var(--vis-hair);stroke-width:12;stroke-linecap:round}
.vis .v-lane.on{stroke:color-mix(in srgb,var(--vis-accent) 18%,transparent)}

/* HTML overlay labels for hybrid (canvas + label) visuals */
.vis .v-html{position:absolute;inset:0;pointer-events:none;font-family:var(--mono)}
.vis .v-lab{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;
  font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--vis-muted)}
.vis .v-lab.v-lab-l{transform:translate(0,-50%)}
.vis .v-lab-sub{display:block}
.vis .v-lab-compact .v-lab-sub{display:none}
.vis .v-compact .v-lab-sub{display:none}
.vis .v-lab strong{display:block;font-family:var(--display);font-size:.9rem;letter-spacing:0;text-transform:none;color:var(--vis-ink);font-weight:700}
.vis .v-hud{position:absolute;left:1rem;bottom:.9rem;display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;
  font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--vis-muted)}
.vis .v-hud b{color:var(--vis-ink);font-weight:600;letter-spacing:.02em;margin-left:.35rem;font-variant-numeric:tabular-nums}
@container vis (max-width:639px){
  .vis .v-lab{font-size:.56rem}.vis .v-lab strong{font-size:.76rem}
  .vis .v-hud{left:.7rem;right:.7rem;bottom:.6rem;gap:.2rem .8rem;font-size:.56rem}
}

/* Keyboard focus for anything interactive inside a visual */
.vis a:focus-visible,.vis button:focus-visible,.vis [tabindex]:focus-visible{
  outline:2px solid var(--vis-accent);outline-offset:3px;border-radius:8px
}

/* Hidden token probe read by kit.js */
.vis-probe{position:absolute!important;width:0;height:0;overflow:hidden;visibility:hidden;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .vis *{transition:none!important;animation:none!important}
}

/* ── Home: ecosystem map (js/visuals/eco-map.js) ───────────────────────────── */
.vis-eco .vis-stage{background:linear-gradient(180deg,var(--vis-node2),var(--vis-ground))}
.vis-eco .eco-svg{pointer-events:none}
.vis-eco .eco-zone{fill:color-mix(in srgb,var(--vis-node) 55%,transparent);stroke:var(--vis-hair);stroke-width:1}
.vis-eco .eco-zone-custodial,.vis-eco .eco-zone-selfcustody{stroke:var(--vis-line)}
.vis-eco .eco-zone-title{font-family:var(--display);font-weight:700;font-size:12.5px;fill:var(--vis-ink)}
.vis-eco .eco-zone-sub{font-size:10px;letter-spacing:.08em;text-transform:uppercase;fill:var(--vis-muted)}
.vis-eco .eco-seam{stroke:var(--vis-line-strong);stroke-width:1.25;stroke-dasharray:2 6}
.vis-eco .eco-seam-label{font-size:10px;letter-spacing:.1em;text-transform:uppercase;fill:var(--vis-muted)}
.vis-eco .eco-note{font-size:10px;letter-spacing:.02em;fill:var(--vis-muted)}
.vis-eco .eco-edge{fill:none;stroke:var(--vis-line);stroke-width:1;transition:stroke .25s ease,stroke-width .25s ease,opacity .25s ease}
.vis-eco .eco-edge-settles{stroke-dasharray:3 5}
.vis-eco .eco-edge-interface{stroke:var(--vis-accent);stroke-width:1.25}
.vis-eco.has-active .eco-edge{opacity:.28}
.vis-eco .eco-edge.is-on{opacity:1;stroke:var(--vis-hi);stroke-width:var(--vis-stroke-hi)}
.vis-eco .eco-port rect{fill:var(--vis-node);stroke:var(--vis-accent);stroke-width:1.25;transition:fill .25s ease,stroke .25s ease}
.vis-eco .eco-port.is-on rect{fill:color-mix(in srgb,var(--vis-accent) 16%,var(--vis-node));stroke:var(--vis-hi)}
.vis-eco .eco-port-label{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;fill:var(--vis-ink)}
.vis-eco.has-active .eco-port:not(.is-on){opacity:.45}

.vis-eco .eco-nodes{position:absolute;inset:0}
.vis-eco .eco-node{
  position:absolute;transform:translate(-50%,-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:.1rem;
  min-width:5.5rem;padding:.5rem .8rem;border-radius:10px;box-sizing:border-box;
  background:var(--vis-node);border:1px solid var(--vis-line);
  color:var(--vis-ink);text-decoration:none;font:inherit;cursor:pointer;
  box-shadow:0 1px 0 var(--edge-light,rgba(255,255,255,.06)) inset,0 6px 18px rgba(0,0,0,.18);
  transition:border-color .2s ease,opacity .25s ease,transform .25s var(--ease-spring,ease),box-shadow .25s ease
}
[data-theme="light"] .vis-eco .eco-node{box-shadow:0 1px 0 #fff inset,0 3px 10px rgba(20,45,50,.07)}
.vis-eco .eco-node-name{font-family:var(--display);font-weight:700;font-size:.82rem;line-height:1.2;letter-spacing:-.01em;max-width:8.5rem;text-align:center}
.vis-eco .eco-node-sub{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--vis-muted);white-space:nowrap}
.vis-eco.eco-compact .eco-node-sub{display:none}
.vis-eco.eco-nowrap .eco-node-name{max-width:none;white-space:nowrap}
.vis-eco .eco-node-networks{min-width:0;padding:.35rem .7rem;background:transparent;border-style:dashed}
.vis-eco .eco-node-networks .eco-node-name{font-family:var(--mono);font-weight:500;font-size:.72rem}
.vis-eco .eco-node-builders{border-color:var(--vis-line-strong)}
.vis-eco .eco-node:hover,.vis-eco .eco-node.is-on{border-color:var(--vis-accent)}
.vis-eco.has-active .eco-node{opacity:.38}
.vis-eco.has-active .eco-node.is-on{opacity:1}
.vis-eco .eco-node.is-on{transform:translate(-50%,-50%) scale(1.04);box-shadow:0 0 0 1px var(--vis-accent),0 8px 26px var(--vis-glow-soft)}
.vis-eco .eco-node:focus-visible{outline:2px solid var(--vis-hi);outline-offset:3px}

.vis-eco .eco-bar{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:1rem 2rem;align-items:start;margin-top:1rem}
.vis-eco .eco-info{min-height:4.6rem;padding:.9rem 1.1rem;border:1px solid var(--vis-hair);border-radius:12px;background:color-mix(in srgb,var(--vis-node) 70%,transparent)}
.vis-eco .eco-info p{margin:0}
.vis-eco .eco-info-hint{font-size:.82rem;color:var(--vis-muted)}
.vis-eco .eco-info-step{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--vis-hi);margin-bottom:.35rem!important}
.vis-eco .eco-info-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .7rem}
.vis-eco .eco-info-title strong{font-family:var(--display);font-size:1rem;color:var(--vis-ink)}
.vis-eco .eco-info-title span{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--vis-muted)}
.vis-eco .eco-info-desc{font-size:.85rem;line-height:1.6;color:var(--vis-ink2);margin-top:.3rem!important}
.vis-eco .eco-info-link{display:inline-block;margin-top:.45rem;font-size:.8rem;font-weight:600;color:var(--vis-accent);text-decoration:none}
.vis-eco .eco-info-link:hover{text-decoration:underline}
.vis-eco .eco-journeys-label{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--vis-muted);margin:0 0 .5rem}
.vis-eco .eco-jbtns{display:flex;flex-wrap:wrap;gap:.45rem}
.vis-eco .eco-jbtn,.vis-eco .eco-ctrl button{
  font:inherit;font-size:.78rem;cursor:pointer;border-radius:999px;padding:.42rem .85rem;
  border:1px solid var(--vis-line);background:var(--vis-node);color:var(--vis-ink);
  transition:border-color .2s ease,background .2s ease
}
.vis-eco .eco-jbtn:hover,.vis-eco .eco-ctrl button:hover{border-color:var(--vis-accent)}
.vis-eco .eco-jbtn[aria-pressed="true"]{border-color:var(--vis-accent);background:color-mix(in srgb,var(--vis-accent) 14%,var(--vis-node))}
.vis-eco .eco-ctrl{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-top:.7rem}
.vis-eco .eco-ctrl[hidden]{display:none}
.vis-eco .eco-prog{position:relative;flex:1 1 6rem;height:3px;border-radius:3px;background:var(--vis-hair);overflow:hidden}
.vis-eco .eco-prog i{position:absolute;left:0;top:0;bottom:0;background:var(--vis-line-strong)}
.vis-eco .eco-prog b{position:absolute;left:0;top:0;bottom:0;background:var(--vis-accent);opacity:.6}
.vis-eco .eco-list{margin-top:1rem;font-size:.85rem;color:var(--vis-ink2)}
.vis-eco .eco-list summary{cursor:pointer;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--vis-muted)}
.vis-eco .eco-list h4{font-family:var(--display);font-size:.9rem;color:var(--vis-ink);margin:1rem 0 .35rem}
.vis-eco .eco-list ul{margin:0;padding-left:1.1rem;line-height:1.7}
.vis-eco .eco-list a{color:var(--vis-accent)}

@container vis (max-width:639px){
  .vis-eco .eco-node{min-width:0;padding:.38rem .55rem;border-radius:8px}
  .vis-eco .eco-node-name{font-size:.66rem;max-width:6.4rem}
  .vis-eco .eco-node-sub{font-size:.5rem}
  .vis-eco .eco-node-networks .eco-node-name{font-size:.6rem}
  .vis-eco .eco-zone-title{font-size:10.5px}
  .vis-eco .eco-bar{grid-template-columns:1fr}
}

/* ── Shared SVG vocabulary for the B3+ visuals (vt-*) ──────────────────────── */
.vis .vt-zone-rect{fill:color-mix(in srgb,var(--vis-node) 45%,transparent);stroke:var(--vis-line);stroke-width:1}
.vis .vt-zone{font-family:var(--display);font-weight:700;font-size:12.5px;fill:var(--vis-ink)}
.vis .vt-zsub{font-size:10px;letter-spacing:.08em;text-transform:uppercase;fill:var(--vis-muted)}
.vis .vt-title{font-family:var(--display);font-weight:700;font-size:13px;fill:var(--vis-ink)}
.vis .vt-sub{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;fill:var(--vis-muted)}
.vis .vt-small{font-size:9px;letter-spacing:.1em;text-transform:uppercase;fill:var(--vis-muted)}
.vis .vt-body{font-family:var(--sans);font-size:12px;fill:var(--vis-ink2)}
.vis .vt-panel{fill:var(--vis-node);stroke:var(--vis-line);stroke-width:1}
.vis .vt-panel-on{fill:var(--vis-node);stroke:var(--vis-accent);stroke-width:var(--vis-stroke-hi)}
.vis .vt-slot{fill:var(--vis-node2);stroke:var(--vis-line);stroke-width:1}
.vis .vt-slot.on{fill:color-mix(in srgb,var(--vis-accent) 55%,var(--vis-node));stroke:var(--vis-accent)}
.vis .vt-seam{stroke:var(--vis-line-strong);stroke-width:1.25;stroke-dasharray:2 6}
.vis .vt-edge{fill:none;stroke:var(--vis-line);stroke-width:1}
.vis .vt-edge-hi{fill:none;stroke:var(--vis-accent);stroke-width:1.25}
.vis .vt-edge-dash{fill:none;stroke:var(--vis-line-strong);stroke-width:1;stroke-dasharray:3 5}
.vis .vt-pill{fill:var(--vis-node);stroke:var(--vis-accent);stroke-width:1.25}
.vis .vt-pill-text{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;fill:var(--vis-ink)}
.vis .vt-dot{fill:var(--vis-hi)}
.vis .vt-muted-dash{fill:none;stroke:var(--vis-muted);stroke-width:1;stroke-dasharray:3 4}
.vis .vt-roadmap{fill:var(--vis-node2);stroke:var(--vis-line-strong);stroke-width:1;stroke-dasharray:4 4}
.vis .vt-hit{cursor:pointer}
.vis .vt-hit:focus-visible{outline:none}
.vis .vt-hit:focus-visible .vt-panel,.vis .vt-hit:focus-visible .vt-roadmap{stroke:var(--vis-hi);stroke-width:2}
@container vis (max-width:639px){
  .vis .vt-zone{font-size:11px}.vis .vt-zsub{font-size:9px}
  .vis .vt-title{font-size:12px}.vis .vt-sub{font-size:8.5px}.vis .vt-body{font-size:11px}
}
/* exchange-flow */
.vis .x-ask{fill:color-mix(in srgb,var(--vis-muted) 42%,transparent)}
.vis .x-bid{fill:color-mix(in srgb,var(--vis-accent) 55%,transparent)}
.vis .x-pulse{fill:none;stroke:var(--vis-hi);stroke-width:1.25}
.vis .x-glyph{fill:none;stroke:var(--vis-ink2);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.vis .x-commit{fill:var(--vis-hi)}
/* wallet-layers */
.vis .w-ring{fill:none;stroke:var(--vis-line);stroke-width:1.25;transition:stroke .3s ease,stroke-width .3s ease}
.vis .w-ring.on{stroke:var(--vis-accent);stroke-width:2.25}
.vis .w-core{fill:var(--vis-node);stroke:var(--vis-accent);stroke-width:1.25}
.vis .w-key{fill:none;stroke:var(--vis-hi);stroke-width:1.6;stroke-linecap:round}
.vis .w-core-text{font-family:var(--display);font-weight:700;font-size:11px;fill:var(--vis-ink)}
.vis .w-badge circle{fill:var(--vis-node);stroke:var(--vis-line-strong);stroke-width:1}
.vis .w-badge text{font-size:10px;font-weight:600;fill:var(--vis-ink)}
.vis .w-badge.on circle,.vis .w-item.on .w-badge circle{fill:var(--vis-accent);stroke:var(--vis-accent)}
.vis .w-badge.on text,.vis .w-item.on .w-badge text{fill:var(--vis-node)}
.vis .w-item{transition:opacity .3s ease}
.vis .w-item.dim{opacity:.45}
.vis .w-probe{fill:var(--vis-hi)}
.vis .w-trail{fill:none;stroke:var(--vis-hi);stroke-width:1;stroke-dasharray:2 4}
.vis .w-stop{fill:none;stroke:var(--vis-hi);stroke-width:1.5}
.vis .w-lg .vt-title{font-size:15.5px}.vis .w-lg .vt-sub{font-size:10px}.vis .w-lg .vt-body{font-size:13.5px}
/* srx-utility */
.vis .s-hub{fill:var(--vis-node);stroke:var(--vis-accent);stroke-width:1.75}
.vis .s-halo{fill:var(--vis-glow-soft);stroke:none}
.vis .s-hub-text{font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:.02em;fill:var(--vis-ink)}
/* token-lifecycle */
.vis .vt-panel.on{stroke:var(--vis-accent);stroke-width:var(--vis-stroke-hi)}
.vis .t-arrow{fill:none;stroke:var(--vis-line-strong);stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.vis .t-chip{fill:color-mix(in srgb,var(--vis-accent) 12%,var(--vis-node));stroke:var(--vis-accent);stroke-width:1}
.vis .t-held{fill:var(--vis-node2);stroke:var(--vis-muted);stroke-width:1;stroke-dasharray:4 4}
.vis .t-held.on{stroke:var(--vis-ink2)}
.vis .t-held-text{fill:var(--vis-ink2)}
.vis .t-mark-ok{fill:none;stroke:var(--vis-hi);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vis .t-mark-held{fill:none;stroke:var(--vis-muted);stroke-width:2;stroke-linecap:round}
.vis .t-token{fill:var(--vis-hi)}
.vis .t-dot-held{fill:var(--vis-muted)}
/* intel-pipeline */
.vis .i-chip{fill:var(--vis-node);stroke:var(--vis-line);stroke-width:1}
/* gov-lifecycle */
.vis .g-base{stroke:var(--vis-line);stroke-width:4;stroke-linecap:round}
.vis .g-fill{stroke:var(--vis-accent);stroke-width:4;stroke-linecap:round}
.vis .g-fill-2{stroke:var(--vis-hi)}
.vis .g-tick{stroke:var(--vis-line-strong);stroke-width:1.25}
.vis .g-end{fill:var(--vis-node);stroke:var(--vis-line-strong);stroke-width:1.5}
.vis .g-end.on{fill:var(--vis-accent);stroke:var(--vis-accent)}
.vis .g-marker{fill:var(--vis-hi);stroke:var(--vis-node);stroke-width:2}
.vis .g-bar{fill:var(--vis-node2);stroke:var(--vis-line);stroke-width:1}
.vis .g-turnout{fill:color-mix(in srgb,var(--vis-accent) 55%,transparent)}
.vis .g-for{fill:var(--vis-accent)}
.vis .g-mark{stroke:var(--vis-ink2);stroke-width:1.25}
/* sentinel-mesh: an anomaly is shown in the accent colour, never alarm red */
.vis .vt-panel.m-anom{stroke:var(--vis-hi);stroke-width:2;fill:color-mix(in srgb,var(--vis-accent) 10%,var(--vis-node))}
.vis .m-trace{fill:none;stroke:var(--vis-hi);stroke-width:2}
.vis .m-hub{fill:var(--vis-node);stroke:var(--vis-accent);stroke-width:1.75}
.vis .m-ring{fill:none;stroke:var(--vis-hi);stroke-width:1.25}
.vis .m-step{fill:var(--vis-node2);stroke:var(--vis-line-strong);stroke-width:1}
.vis .m-step.on{fill:var(--vis-accent);stroke:var(--vis-accent)}
.vis .m-tick{fill:none;stroke:var(--vis-node);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* quant-funnel */
.vis .q-band{fill:color-mix(in srgb,var(--vis-accent) 9%,transparent);stroke:var(--vis-line);stroke-width:1}
.vis .q-gate{stroke:var(--vis-line-strong);stroke-width:1.25}
.vis .q-gate-val{stroke-dasharray:3 3}
.vis .q-gate.on{stroke:var(--vis-hi);stroke-width:2;stroke-dasharray:none}
.vis .q-dot{fill:var(--vis-accent)}
.vis .q-dot.q-win{fill:var(--vis-hi)}
.vis .q-lab{font-size:12.5px}
/* labs-stack */
.vis .l-dim{fill:var(--vis-node2);stroke:var(--vis-line-strong);stroke-width:1;stroke-dasharray:4 4}
.vis .l-dim-text{fill:var(--vis-ink2)}
.vis .l-row{opacity:.38;transition:opacity .35s ease}
.vis .l-row.on{opacity:1}
.vis .l-bullet{fill:var(--vis-node2);stroke:var(--vis-line-strong);stroke-width:1}
.vis .l-row.on .l-bullet{fill:var(--vis-accent);stroke:var(--vis-accent)}
/* eco-map v2: two frames, the divisions beside the ecosystem */
.vis-eco .eco-frame{fill:color-mix(in srgb,var(--vis-node) 35%,transparent);stroke:var(--vis-line-strong);stroke-width:1}
.vis-eco .eco-frame-div{stroke-dasharray:5 5}
.vis-eco .eco-panel{transition:stroke .25s ease}
.vis-eco .eco-panel.is-on{stroke:var(--vis-accent)}
.vis-eco .eco-band{fill:color-mix(in srgb,var(--vis-accent) 6%,transparent)}
.vis-eco .eco-div{align-items:flex-start;text-align:left;padding:.7rem .9rem;border-radius:12px;min-width:0;box-sizing:border-box}
.vis-eco .eco-div .eco-node-name{max-width:none;text-align:left}
.vis-eco .eco-node-line{font-family:var(--sans);font-size:.76rem;line-height:1.45;color:var(--vis-ink2);margin-top:.2rem}
.vis-eco .eco-gate{min-width:0;width:28px;height:28px;padding:0;border:none;background:none;box-shadow:none;display:flex;align-items:center;justify-content:center}
.vis-eco .eco-gate-mark{display:block;width:15px;height:15px;transform:rotate(45deg);background:var(--vis-node);border:1.5px solid var(--vis-accent);border-radius:3px;transition:background .2s ease}
.vis-eco .eco-gate:hover .eco-gate-mark,.vis-eco .eco-gate.is-on .eco-gate-mark{background:var(--vis-accent)}
.vis-eco .eco-gate.is-on{box-shadow:none}
.vis-eco .eco-bar-single{grid-template-columns:1fr}
@container vis (max-width:639px){ .vis-eco .eco-node-line{font-size:.72rem} }

/* ── Overview explainers: plain-flow, plain-keys, plain-proof ───────────────── */
.vis .pf-edge-on{stroke:var(--vis-accent);stroke-width:var(--vis-stroke-hi);transition:stroke .3s ease}
.vis .pf-pill-muted{stroke:var(--vis-line);stroke-width:1}
.vis .pf-bar{fill:var(--vis-line)}
.vis .pf-cover{fill:var(--vis-node2);stroke:var(--vis-accent);stroke-width:1;stroke-dasharray:3 3}
.vis .pf-check{fill:none;stroke:var(--vis-hi);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.vis .gb-chip-on{fill:color-mix(in srgb,var(--vis-accent) 14%,var(--vis-node))}