@layer utilities {
:root{
    --page:#f7f5fb;
    --q-bg: var(--color-primary-purple-99);
    --q-border:var(--color-primary-purple-90);
    --q-dash:#c8bdf0;
    --q-label:#7340ff;
    --chip-bg: var(--color-white);
    --chip-text:#1d1a29;
    --chip-border:#ddd6f2;
    --chip-shadow:0 1px 2px rgba(46,26,102,.06),0 4px 14px rgba(46,26,102,.06);
    --s-bg: var(--color-neutral-20);
    --s-border:#0F0E14;
    --s-label:#a88bff;
    --s-text:#ece9f5;
    --s-muted:#8c879c;
    --edge:rgba(255,255,255,.17);
    --edge-dot:rgba(255,255,255,.35);
    --purple: var(--color-primary-purple-60);
    --purple-ink: var(--color-white);
    --sans: var(--font-geist);
    --mono: var(--font-geist-mono);
    color-scheme:light;
    box-sizing:border-box;
    padding-top:env(safe-area-inset-top,0px);
    padding-bottom:env(safe-area-inset-bottom,0px);
}
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --page:#0e0d12;
    --q-bg:#1b1729;
    --q-border:#2a2440;
    --q-dash:#41376b;
    --q-label:#a88bff;
    --chip-bg:#251f3a;
    --chip-text:#ece9f5;
    --chip-border:#3a3258;
    --chip-shadow:0 4px 14px rgba(0,0,0,.25);
    --s-border:#2a2832;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
    --page:#0e0d12;
    --q-bg:#1b1729;
    --q-border:#2a2440;
    --q-dash:#41376b;
    --q-label:#a88bff;
    --chip-bg:#251f3a;
    --chip-text:#ece9f5;
    --chip-border:#3a3258;
    --chip-shadow:0 4px 14px rgba(0,0,0,.25);
    --s-border:#2a2832;
    color-scheme:dark;
}

/* ---------- card ---------- */
.card{
  position:relative;width:100%;border-radius:20px;overflow:hidden;
  background:var(--q-bg);border:1px solid var(--q-border);
  transition:background-color .6s ease,border-color .6s ease;
  user-select:none;-webkit-user-select:none;
}
.card.is-signals{background:var(--s-bg);border-color:var(--s-border)}
.card::after{ /* faint dot grid in signals state */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.2px);
  background-size:22px 22px;transition:opacity .8s ease .3s;
}
.card.is-signals::after{opacity:1}

/* ---------- header ---------- */
.head{position:absolute;z-index:5;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:18px 18px 0 26px}
.eyebrow{margin:10px 0 0;font:500 13px/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--q-label);transition:color .6s ease}
.card.is-signals .eyebrow{color:var(--s-label)}
.eyebrow span{display:inline-block;transition:opacity .25s ease}
.toggle{position:relative;display:flex;padding:5px;border-radius:999px;background:var(--chip-bg);border:1.5px solid color-mix(in srgb,var(--purple) 40%,var(--chip-border));box-shadow:0 2px 10px color-mix(in srgb,var(--purple) 14%,transparent);transition:background-color .6s,border-color .6s,box-shadow .6s;flex:none}
.card.is-signals .toggle{background:#1d1b27;border-color:#3d3854;box-shadow:0 2px 12px rgba(0,0,0,.35)}
.toggle .pill{position:absolute;top:5px;bottom:5px;left:5px;border-radius:999px;background:var(--purple);box-shadow:0 0 0 2px var(--chip-bg),0 0 0 3.5px var(--purple);transition:transform .45s cubic-bezier(.6,0,.2,1),width .45s cubic-bezier(.6,0,.2,1),background-color .45s,box-shadow .45s}
.card.is-signals .toggle .pill{background:#e8e6ef;box-shadow:none}
.toggle button{position:relative;z-index:1;appearance:none;border:0;background:none;cursor:pointer;padding:10px 20px;border-radius:999px;font:600 15px/1 var(--sans);color:var(--chip-text);opacity:.85;transition:color .45s,opacity .45s}
.toggle button[aria-pressed="false"]:hover{opacity:1;color:var(--purple)}
.toggle button[aria-pressed="true"]{opacity:1;color:var(--purple-ink)}
.card.is-signals .toggle button{color:#c9c5d8}
.card.is-signals .toggle button[aria-pressed="true"]{color:#18171c}
.toggle button:focus-visible,.cta:focus-visible{outline:2px solid var(--purple);outline-offset:3px}

/* ---------- queue chips ---------- */
.chips{position:absolute;inset:0;z-index:2;pointer-events:none}
.chip{
  position:absolute;display:block;pointer-events:auto;cursor:default;
  transform-origin:14px 50%;
  transition:transform .7s cubic-bezier(.6,0,.2,1),opacity .3s ease;
  animation:chipFloat 4.2s ease-in-out infinite;animation-delay:var(--fd,0s);
}
.chip-body{
  display:inline-flex;align-items:center;gap:11px;white-space:nowrap;
  padding:12px 16px;border-radius:9px;background:var(--chip-bg);border:1px solid var(--chip-border);
  font:400 16px/1 var(--mono);color:var(--chip-text);
  transition:translate .45s cubic-bezier(.3,1.5,.5,1),border-color .35s ease,background-color .6s,color .6s;
}
.chip:hover .chip-body{translate:8px -4px;border-color:color-mix(in srgb,var(--purple) 45%,var(--chip-border))}
@keyframes chipFloat{0%,100%{translate:0 0}50%{translate:0 -5px}}
.card.is-signals .chip{pointer-events:none;animation-play-state:paused}
.chip i{width:10px;height:10px;border-radius:50%;flex:none}
.cta{
  position:absolute;z-index:4;right:24px;bottom:24px;display:inline-flex;align-items:center;gap:14px;
  padding:7px 7px 7px 18px;border:0;border-radius:999px;cursor:pointer;
  background:var(--purple);color:#fff;font:500 15px/1 var(--sans);
  box-shadow:0 6px 24px rgba(115,64,255,.35);transition:opacity .35s ease,transform .35s ease,box-shadow .2s;
}
.cta:hover{box-shadow:0 8px 30px rgba(115,64,255,.5)}
.cta b{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.2);font-weight:400}
.card.is-signals .cta{opacity:0;transform:translateY(6px);pointer-events:none}

/* ---------- graph ---------- */
svg.graph{position:absolute;inset:0;width:100%;height:100%;z-index:3;overflow:visible}
.edge{fill:none;stroke:var(--edge);stroke-width:1.4;transition:stroke-dashoffset .9s cubic-bezier(.5,0,.2,1),stroke .3s,opacity .3s}
.edge.dashed{opacity:0;transition:opacity .6s ease,stroke .3s}
.edge.red{stroke:rgba(229,72,77,.6)}
.edge.white{stroke:rgba(255,255,255,.28)}
.mid{fill:var(--edge-dot);opacity:0;transition:opacity .4s}
.idle-flow{opacity:0;transition:opacity .5s}
.card.is-signals .idle-flow{opacity:1;transition-delay:1.6s}
.card:not(.is-signals) .idle-flow{transition-delay:0s;transition-duration:.25s}
.card.focusing .idle-flow{opacity:.12;transition-delay:0s}
.node{opacity:0;transition:opacity .45s ease;cursor:pointer;outline:none}
.node .shape{transform-box:fill-box;transform-origin:center;transform:scale(.4);transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
.node .lbls{opacity:0;transition:opacity .5s ease}
.lbl{paint-order:stroke;stroke:var(--s-bg);stroke-width:5px;stroke-linejoin:round}
.lblbg{fill:var(--s-bg)}
.lbl.mono{font-family:var(--mono)}
.lbl.sans{font-family:var(--sans)}
.node.dim{--dimmed:.55}

.card.is-signals .node{opacity:var(--dimmed,1);transition-delay:var(--d)}
.card.is-signals .node .shape{transform:scale(1);transition-delay:var(--d)}
.card.is-signals .node .lbls{opacity:1;transition-delay:calc(var(--d) + .7s)}
.card.is-signals .edge{stroke-dashoffset:0 !important;transition-delay:var(--d)}
.card.is-signals .edge.dashed{opacity:1}
.card.is-signals .mid{opacity:1;transition-delay:1.4s}
.card:not(.is-signals) .node,.card:not(.is-signals) .node .lbls,.card:not(.is-signals) .edge,.card:not(.is-signals) .mid{transition-duration:.25s;transition-delay:0s}
.card:not(.is-signals) .graph{pointer-events:none}

/* focus / hover highlight */
.card.focusing .node{opacity:.28}
.card.focusing .edge{opacity:.25}
.card.focusing .mid{opacity:.15}
.card.focusing .node.lit{opacity:1}
.card.focusing .edge.lit{opacity:1;stroke:var(--c);stroke-width:1.8}
.card.focusing .mid.lit{opacity:1;fill:var(--c)}
.card.focusing .node,.card.focusing .edge,.card.focusing .mid{transition-delay:0s !important;transition-duration:.25s}
.node:focus-visible .shape{filter:drop-shadow(0 0 4px #a88bff)}

.no-anim *,.no-anim *::before,.no-anim::before,.no-anim::after,.no-anim{transition:none !important}

/* ---------- narrow layout ---------- */
.card.narrow .head{flex-direction:column;align-items:flex-start;padding:16px 16px 0 18px}
.card.narrow .eyebrow{margin-top:4px;font-size:11px}
.card.narrow .toggle button{font-size:14px;padding:9px 16px}
.card.narrow .chip-body{font-size:12.5px;padding:10px 12px;gap:9px}
.card.narrow .chip i{width:8px;height:8px}
.card.narrow .cta{right:18px;bottom:18px;font-size:14px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;transition-delay:0s !important;animation:none !important}
}