/* ---------------------------------------------------------------------------
   Solution "how it works" diagrams — shared vocabulary.

   One stylesheet for all 14 bespoke diagrams. Each diagram file is pure SVG
   markup and carries no CSS of its own: geometry lives in the markup, motion
   lives here. Timing is driven by one variable, --cyc (the loop length), and
   per-element offsets are set inline as --d.

   Element classes:  dg-card dg-soft dg-node dg-pill dg-wire dg-pk dg-tick
                     dg-cross dg-flag dg-track dg-bar dg-t dg-lbl dg-sm dg-mono
   Motion classes:   dg-in dg-pop dg-show dg-fade dg-lit dg-edge dg-fill
                     dg-draw dg-scan dg-shift dg-ring dg-spin dg-pulse dg-blink
   Inline vars:      --d (delay) --dx/--dy (travel) --len (path length)

   Holds still under prefers-reduced-motion: every animated element's resting
   style is its finished state, so switching the animations off leaves a
   complete, readable diagram.
--------------------------------------------------------------------------- */

.dg{--ink:#0f172a;--body:#475569;--muted:#64748b;--line:#e2e8f0;--soft:#f8fafc;--wire:#cbd5e1;--g:#13ec80;--g7:#047857;--gs:#ecfdf5;--gl:#a7f3d0;--am:#b45309;--am-s:#fffbeb;--am-l:#fcd34d;--rd:#b91c1c;--rd-s:#fef2f2;--rd-l:#fecaca;--cyc:9s;border:1px solid var(--line);border-radius:16px;background:#fff;padding:26px 28px 22px;margin-bottom:20px}
.dg svg{display:block;width:100%;height:auto;font-family:inherit}
.dg.vis-narrow{display:none}
@media (max-width:700px){.dg.vis-wide{display:none}.dg.vis-narrow{display:block}.dg{padding:20px 18px 16px}}

/* ---- surfaces ---- */
.dg .dg-card{fill:#fff;stroke:var(--line);stroke-width:1.5}
.dg .dg-soft{fill:var(--soft);stroke:var(--line);stroke-width:1.5}
.dg .dg-node{fill:var(--gs);stroke:var(--gl);stroke-width:1.5}
.dg .dg-deep{fill:#052e1e;stroke:#064e3b;stroke-width:1.5}
.dg .dg-pill{fill:#fff;stroke:var(--line);stroke-width:1.5}
.dg .dg-amber{fill:var(--am-s);stroke:var(--am-l);stroke-width:1.5}
.dg .dg-red{fill:var(--rd-s);stroke:var(--rd-l);stroke-width:1.5}
.dg .dg-track{fill:#eef2f7}
.dg .dg-hair{fill:none;stroke:var(--line);stroke-width:1}
.dg .dg-hair.dash{stroke-dasharray:3 5}

/* ---- type ---- */
.dg .dg-t{font-size:13px;font-weight:700;fill:var(--ink)}
.dg .dg-lbl{font-size:12.5px;font-weight:600;fill:var(--body)}
.dg .dg-sm{font-size:11.5px;font-weight:600;fill:var(--muted)}
.dg .dg-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.1em;fill:var(--muted)}
.dg .dg-num{font-size:17px;font-weight:800;fill:var(--ink)}
.dg .dg-on{fill:var(--g7)}
.dg .dg-warn{fill:var(--am)}
.dg .dg-bad{fill:var(--rd)}
.dg .dg-rev{fill:#fff}

/* ---- wires and packets ---- */
.dg .dg-wire{fill:none;stroke:var(--wire);stroke-width:1.5;stroke-dasharray:4 8;stroke-linecap:round;animation:dgFlow 1.4s linear infinite}
.dg .dg-wire.solid{stroke-dasharray:none;animation:none}
.dg .dg-wire.thin{stroke-width:1;stroke-dasharray:3 6}
@keyframes dgFlow{to{stroke-dashoffset:-24}}
.dg .dg-pk{fill:var(--g7);offset-rotate:0deg;animation:dgPk var(--cyc) cubic-bezier(.5,0,.5,1) infinite both;animation-delay:var(--d,0s)}
@keyframes dgPk{0%{offset-distance:0%;opacity:0}2%{opacity:1}11%{offset-distance:100%;opacity:1}13%,100%{offset-distance:100%;opacity:0}}

/* ---- marks ---- */
.dg .dg-tick{transform-box:fill-box;transform-origin:center;animation:dgTick var(--cyc) cubic-bezier(.34,1.56,.64,1) infinite both;animation-delay:var(--d,0s)}
.dg .dg-tick circle{fill:var(--gs);stroke:var(--gl);stroke-width:1.5}
.dg .dg-tick path{fill:none;stroke:var(--g7);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dg .dg-cross{transform-box:fill-box;transform-origin:center;animation:dgTick var(--cyc) cubic-bezier(.34,1.56,.64,1) infinite both;animation-delay:var(--d,0s)}
.dg .dg-cross circle{fill:var(--rd-s);stroke:var(--rd-l);stroke-width:1.5}
.dg .dg-cross path{fill:none;stroke:var(--rd);stroke-width:2;stroke-linecap:round}
.dg .dg-flag{transform-box:fill-box;transform-origin:center;animation:dgTick var(--cyc) cubic-bezier(.34,1.56,.64,1) infinite both;animation-delay:var(--d,0s)}
.dg .dg-flag circle{fill:var(--am-s);stroke:var(--am-l);stroke-width:1.5}
.dg .dg-flag path{fill:none;stroke:var(--am);stroke-width:2;stroke-linecap:round}
@keyframes dgTick{0%{opacity:0;transform:scale(.4)}4%{opacity:1;transform:scale(1.16)}7%,100%{opacity:1;transform:scale(1)}}

/* ---- entrances and holds ---- */
.dg .dg-in{transform-box:fill-box;animation:dgIn var(--cyc) cubic-bezier(.2,.7,.3,1) infinite both;animation-delay:var(--d,0s)}
@keyframes dgIn{0%{opacity:0;transform:translateY(7px)}6%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.dg .dg-pop{transform-box:fill-box;transform-origin:center;animation:dgPop var(--cyc) cubic-bezier(.34,1.56,.64,1) infinite both;animation-delay:var(--d,0s)}
@keyframes dgPop{0%{opacity:0;transform:scale(.72)}5%{opacity:1;transform:scale(1.08)}9%,100%{opacity:1;transform:scale(1)}}
.dg .dg-show{animation:dgShow var(--cyc) ease-out infinite both;animation-delay:var(--d,0s)}
@keyframes dgShow{0%{opacity:0}4%,100%{opacity:1}}
.dg .dg-fade{animation:dgFade var(--cyc) ease-in-out infinite both;animation-delay:var(--d,0s)}
@keyframes dgFade{0%{opacity:0}4%{opacity:1}26%{opacity:1}32%,100%{opacity:0}}

/* ---- state changes ---- */
.dg .dg-lit{animation:dgLit var(--cyc) ease-in-out infinite both;animation-delay:var(--d,0s)}
@keyframes dgLit{0%{fill:#fff;stroke:var(--line)}6%,90%{fill:var(--gs);stroke:var(--gl)}98%,100%{fill:#fff;stroke:var(--line)}}
.dg .dg-edge{animation:dgEdge var(--cyc) ease-in-out infinite both;animation-delay:var(--d,0s)}
@keyframes dgEdge{0%{stroke:var(--line)}4%{stroke:var(--g)}14%,100%{stroke:var(--line)}}
.dg .dg-fill{transform-box:fill-box;transform-origin:left center;animation:dgFill var(--cyc) cubic-bezier(.4,0,.2,1) infinite both;animation-delay:var(--d,0s)}
@keyframes dgFill{0%{transform:scaleX(0)}12%,96%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.dg .dg-rise{transform-box:fill-box;transform-origin:center bottom;animation:dgRise var(--cyc) cubic-bezier(.4,0,.2,1) infinite both;animation-delay:var(--d,0s)}
@keyframes dgRise{0%{transform:scaleY(0)}10%,96%{transform:scaleY(1)}100%{transform:scaleY(0)}}
.dg .dg-draw{fill:none;stroke-dasharray:var(--len,240);stroke-dashoffset:0;animation:dgDraw var(--cyc) cubic-bezier(.4,0,.2,1) infinite both;animation-delay:var(--d,0s)}
@keyframes dgDraw{0%{stroke-dashoffset:var(--len,240)}12%,100%{stroke-dashoffset:0}}
.dg .dg-shift{transform-box:fill-box;animation:dgShift var(--cyc) cubic-bezier(.4,0,.2,1) infinite both;animation-delay:var(--d,0s)}
@keyframes dgShift{0%{transform:none}16%,100%{transform:translate(var(--dx,0px),var(--dy,0px))}}
.dg .dg-merge{transform-box:fill-box;animation:dgMerge var(--cyc) cubic-bezier(.4,0,.2,1) infinite both;animation-delay:var(--d,0s)}
@keyframes dgMerge{0%,10%{opacity:1;transform:none}30%{opacity:1;transform:translate(var(--dx,0px),var(--dy,0px))}38%,100%{opacity:0;transform:translate(var(--dx,0px),var(--dy,0px))}}

/* ---- sweeps and probes ---- */
.dg .dg-scan{animation:dgScan var(--cyc) cubic-bezier(.45,0,.55,1) infinite both;animation-delay:var(--d,0s)}
@keyframes dgScan{0%{opacity:0;transform:none}3%{opacity:1}22%{opacity:1;transform:translate(var(--dx,0px),var(--dy,0px))}27%,100%{opacity:0;transform:translate(var(--dx,0px),var(--dy,0px))}}
.dg .dg-ring{fill:none;stroke:var(--gl);stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:dgRing 2.8s ease-out infinite both;animation-delay:var(--d,0s)}
@keyframes dgRing{0%{opacity:.85;transform:scale(.28)}70%{opacity:0;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
.dg .dg-orbit{fill:var(--g7);offset-rotate:0deg;animation:dgOrbit 7s linear infinite;animation-delay:var(--d,0s)}
@keyframes dgOrbit{from{offset-distance:0%}to{offset-distance:100%}}
.dg .dg-spin{transform-box:fill-box;transform-origin:center;animation:dgSpin 14s linear infinite}
@keyframes dgSpin{to{transform:rotate(360deg)}}
.dg .dg-pulse{transform-box:fill-box;transform-origin:center;animation:dgPulse 2.4s ease-in-out infinite alternate}
@keyframes dgPulse{from{opacity:.45}to{opacity:1}}
.dg .dg-blink{animation:dgBlink 1.6s steps(1,end) infinite}
@keyframes dgBlink{0%,49%{opacity:1}50%,100%{opacity:.15}}

@media (prefers-reduced-motion:reduce){
  .dg svg *{animation:none!important;transform:none!important;stroke-dashoffset:0!important;opacity:1!important}
  .dg .dg-pk,.dg .dg-scan,.dg .dg-ring,.dg .dg-merge,.dg .dg-orbit{display:none!important}
  .dg .dg-lit{fill:var(--gs);stroke:var(--gl)}
}