/* HeartBug presentation stylesheet 16 (extracted from inline <style>) */

  .p11-slide .inner{width:min(1400px,100%);display:flex;flex-direction:column;justify-content:center;height:100%}
  .p11-chain{margin-top:clamp(22px,5vh,56px);cursor:pointer}
  .p11-chain svg{width:100%;height:auto;display:block;overflow:visible}
  /* node frames: black hairline → brand red, gentle fade */
  .p11-node .frame{stroke:var(--ink);stroke-width:2.4;fill:#fff;
    transition:stroke .45s ease,fill .45s ease}
  .p11-node .glyph{stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;fill:none;
    transition:stroke .45s ease}
  .p11-node.on .frame{stroke:var(--red)}
  .p11-node.on .glyph{stroke:var(--red)}
  /* HeartBug source node: always red-filled, white glyph; soft pulse when signal leaves */
  #p11n0 .frame{fill:var(--red);stroke:var(--red)}
  #p11n0 .glyph{stroke:#fff}
  #p11n0.on .frame{animation:p11Src 1.2s ease-out}
  @keyframes p11Src{0%{stroke-width:2.4}35%{stroke-width:7}100%{stroke-width:2.4}}
  /* faint pulse halo around node icons */
  .p11-node .pring{fill:none;stroke:var(--red);stroke-width:1.6;opacity:0;
    transform-box:fill-box;transform-origin:center}
  .p11-node.on .pring{animation:p11Halo 1.9s ease-out infinite}
  #p11n0 .pring{animation:p11Halo 2.4s ease-out infinite}
  @keyframes p11Halo{0%{transform:scale(.94);opacity:.55}100%{transform:scale(1.38);opacity:0}}
  /* dotted spine + flowing signal dots */
  .p11-spine{stroke:var(--red);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:.1 12;opacity:.32}
  .p11-flow{fill:var(--red);opacity:.75}
  /* photon mist — drifting light motes + soft cloud wisps along the chain */
  .p11-mist ellipse{fill:url(#p11MistG);opacity:.55}
  .p11-mist .m1{animation:p11Drift1 11s ease-in-out infinite}
  .p11-mist .m2{animation:p11Drift2 14s ease-in-out infinite}
  .p11-mist .m3{animation:p11Drift1 17s ease-in-out infinite reverse}
  @keyframes p11Drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(26px,-7px)}}
  @keyframes p11Drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-30px,8px)}}
  .p11-motes circle{fill:var(--red)}
  .p11-motes .p1{animation:p11Mote 5.2s ease-in-out infinite}
  .p11-motes .p2{animation:p11Mote 6.4s ease-in-out infinite 1.1s}
  .p11-motes .p3{animation:p11Mote 4.6s ease-in-out infinite 2s}
  .p11-motes .p4{animation:p11Mote 7s ease-in-out infinite .6s}
  .p11-motes .p5{animation:p11Mote 5.8s ease-in-out infinite 1.7s}
  .p11-motes .p6{animation:p11Mote 6.8s ease-in-out infinite 2.6s}
  .p11-motes .p7{animation:p11Mote 5.4s ease-in-out infinite .3s}
  .p11-motes .p8{animation:p11Mote 6.1s ease-in-out infinite 1.4s}
  .p11-motes .p9{animation:p11Mote 7.4s ease-in-out infinite 2.2s}
  @keyframes p11Mote{0%,100%{opacity:.12;transform:translate(0,0)}45%{opacity:.85;transform:translate(9px,-6px)}70%{opacity:.4;transform:translate(14px,-2px)}}
  /* travelling step pulse */
  #p11Pulse{fill:var(--red);opacity:0;transition:cx .7s cubic-bezier(.45,0,.35,1),opacity .3s}
  /* labels */
  .p11-labels{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(8px,1.6vh,16px)}
  .p11-lab{text-align:center;transition:opacity .6s}
  .p11-lab h3{font-size:clamp(.95rem,1.5vw,1.3rem);font-weight:800;color:var(--ink);transition:color .45s ease}
  .p11-lab p{margin-top:6px;font-size:clamp(.72rem,.92vw,.86rem);color:var(--dim);max-width:26ch;margin-inline:auto;
    opacity:.75;transition:color .45s ease,opacity .4s}
  .p11-lab.on h3{color:var(--red)}
  .p11-lab.on p{color:var(--muted);opacity:1}
  /* caption triplet lights up with the chain */
  .p11-cap{margin-top:clamp(22px,5vh,48px);font-size:clamp(1rem,1.6vw,1.4rem);font-weight:600;color:var(--dim)}
  .p11-cap span{transition:color .45s ease}
  .p11-cap span.on{color:var(--ink)}
  .p11-cap span.on:last-child{color:var(--red)}
  /* pause hint */
  .p11-hintline{margin-top:clamp(10px,2vh,18px);font-size:11px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--dim);text-align:center;opacity:.8}
  /* chain intro */
  .is-active .p11-chain{animation:p11In 1s var(--ease) both .3s}
  @keyframes p11In{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
  @media (max-width:800px){
    .p11-labels{grid-template-columns:repeat(2,1fr);row-gap:18px}
  }