/* Flow ribbon canvas + pause button (js/flow-ribbon.js). Palette = CSS variables, so a page picks a
   product colour by setting --flow-* on <canvas data-flow-canvas> (or on body). Defaults are AityTech (zeniflow-like):
   teal / cyan / periwinkle on navy, deeper blues on light. Pages that load this file must give sections a
   transparent or translucent background so the ribbon shows through. */
canvas[data-flow-canvas] {
  position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; z-index: -1; pointer-events: none; display: block;
  --flow-mode: lighter; --flow-alpha: 0.9;
  --flow-s0: rgba(123, 198, 223, 0.95); --flow-s1: rgba(116, 223, 248, 0.95); --flow-s2: rgba(148, 178, 255, 0.92);
  --flow-b0: rgba(11, 141, 184, 0.08); --flow-b1: rgba(2, 177, 238, 0.1); --flow-b2: rgba(35, 125, 251, 0.07);
  --flow-k0: rgba(190, 240, 255, 0.9); --flow-k1: rgba(80, 200, 240, 0.35); --flow-k2: rgba(50, 201, 243, 0);
}
html[data-theme="light"] canvas[data-flow-canvas] {
  --flow-mode: source-over; --flow-alpha: 0.7;
  --flow-s0: rgba(8, 92, 120, 0.9); --flow-s1: rgba(6, 119, 174, 0.9); --flow-s2: rgba(6, 80, 237, 0.85);
  --flow-b0: rgba(11, 141, 184, 0.09); --flow-b1: rgba(2, 177, 238, 0.11); --flow-b2: rgba(35, 125, 251, 0.08);
  --flow-k0: rgba(2, 177, 238, 0.6); --flow-k1: rgba(2, 177, 238, 0.22); --flow-k2: rgba(2, 177, 238, 0);
}
.flow-pause {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 40; display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 2.75rem; padding: 0 1rem; font: 500 0.8125rem/1 'DM Sans', system-ui, sans-serif; color: var(--c-ink-2);
  background: var(--c-pop); border: 1px solid var(--c-line-strong); border-radius: 999px; cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.flow-pause:hover { color: var(--c-ink); border-color: var(--c-link); }
.flow-pause i { width: 0.5rem; height: 0.75rem; border-left: 2px solid currentColor; border-right: 2px solid currentColor; }
.flow-pause[aria-pressed="true"] i { width: 0; height: 0; border: 0; border-left: 0.6rem solid currentColor; border-top: 0.4rem solid transparent; border-bottom: 0.4rem solid transparent; }
.flow-pause .flow-pause__off { display: none; }
.flow-pause[aria-pressed="true"] .flow-pause__on { display: none; }
.flow-pause[aria-pressed="true"] .flow-pause__off { display: inline; }
html.flow-paused *, html.flow-paused *::before, html.flow-paused *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .flow-pause { display: none; } }
@media (max-width: 640px) { .flow-pause { bottom: 4.5rem; } }