/* One viewport-sized layer. It never intercepts a link, swipe, or selection. */
body { isolation: isolate; }
.site-flow { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; contain: strict; }
.site-flow::before { content: ""; position: absolute; inset: 0; background: url("../assets/hero-field.svg") center / cover no-repeat; opacity: .48; }
.site-flow[data-flow-ready]::before { display: none; }
.site-flow canvas { display: block; width: 100%; height: 100%; }
/* The renderer carries these exact existing tones, with feathered boundaries. */
.has-site-flow .about, .has-site-flow .socials { background: transparent; }
.flow-toggle { color: var(--muted); background: transparent; font-size: 9px; letter-spacing: .035em; padding: 8px 10px; margin-block: -8px; }
.flow-toggle > span { color: var(--ink); margin-left: 8px; border-bottom: 1px solid var(--line); }
.flow-toggle[hidden] { display: none; }
.footer-bottom .flow-toggle { margin-left: auto; }
.project-topbar .flow-toggle { order: 1; }
.project-topbar .project-counter { order: 2; }
@media (max-width: 700px) {
  .flow-toggle { font-size: 8px; }
  .footer-bottom .flow-toggle { margin-left: 0; }
}