/* Optional landing-page Flow section. All selectors and tokens are scoped. */
.aria-flow {
  --aria-flow-primary: var(--ground, #fff);
  --aria-flow-secondary: var(--ink3, #7c7c7c);
  --aria-flow-accent: var(--pen, #c0392b);
}
/* Landing: the field is always dark, so it sits cleanly on both the white and the black page. */
.aria-flow--landing {
  --aria-flow-primary: #ffffff;
  --aria-flow-secondary: #8a8a8a;
  --aria-flow-accent: #ff6b5b;
  margin-block: clamp(36px, 5vw, 64px) 0;
}
.aria-flow[hidden] { display: none; }
.aria-flow .aria-flow__heading { margin-bottom: 18px; }
.aria-flow .aria-flow__heading h2 {
  margin: 0;
  font-size: clamp(34px, 4.2vw, 52px);
  line-height: 1.04;
}
.aria-flow .aria-flow__heading p {
  margin: 8px 0 0;
  font-size: 16px;
  color: var(--ink2, #4a4a4a);
}
.aria-flow .aria-flow__toggle {
  flex: none;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--line, #ddd);
  border-radius: 999px;
  background: var(--paper, #fff);
  color: var(--ink, #000);
  font: 500 14px/1.2 var(--sans, system-ui, sans-serif);
  cursor: pointer;
  transition: background .2s ease;
}
.aria-flow .aria-flow__toggle:hover { background: var(--fill, #f3f3f3); }
.aria-flow .aria-flow__toggle:focus-visible {
  outline: 2px solid var(--pen, #c0392b);
  outline-offset: 3px;
}
.aria-flow .aria-flow__field {
  position: relative;
  height: clamp(230px, 24vw, 300px); /* flow.html sets its own full-screen height */
  overflow: hidden;
  border: 1px solid var(--line, #ddd);
  border-radius: 24px;
  background: var(--ink, #000);
  contain: layout paint;
  /* Touch gestures still scroll the page; Flow never captures the pointer. */
  touch-action: pan-y pinch-zoom;
}
.aria-flow .aria-flow__field canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: pan-y pinch-zoom;
}
.aria-flow .aria-flow__hint {
  margin: 10px 0 0;
  color: var(--ink2, #4a4a4a);
  font-size: 13px;
}

/* Landing layout: the play/pause control and the hint live inside the field. */
.aria-flow--landing .aria-flow__field {
  background:
    radial-gradient(90% 120% at 0% 100%, rgba(255, 90, 72, .16), transparent 58%),
    radial-gradient(70% 90% at 100% 0%, rgba(255, 255, 255, .07), transparent 62%),
    #050505;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 30px 60px -40px rgba(0, 0, 0, .55);
}
.aria-flow__field:has(.aria-flow__hint)::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 96px;
  background: linear-gradient(to top, rgba(5, 5, 5, .78), transparent);
  pointer-events: none;
}
.aria-flow__field .aria-flow__hint, .aria-flow__field .aria-flow__toggle { z-index: 1; }
.aria-flow__field .aria-flow__toggle {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(20, 20, 20, .55);
  color: #fff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background .2s ease, transform .2s ease;
}
.aria-flow__field .aria-flow__toggle:hover { background: rgba(40, 40, 40, .75); }
.aria-flow__field .aria-flow__toggle:active { transform: scale(.94); }
.aria-flow__field .aria-flow__toggle svg { width: 18px; height: 18px; }
.aria-flow__field .aria-flow__toggle .i-play,
.aria-flow__field .aria-flow__toggle[aria-pressed="true"] .i-pause { display: none; }
.aria-flow__field .aria-flow__toggle[aria-pressed="true"] .i-play { display: block; }
.aria-flow__field .aria-flow__hint {
  position: absolute;
  left: 18px;
  right: 72px;
  bottom: 24px;
  margin: 0;
  color: rgba(255, 255, 255, .62);
  font-size: 13px;
  line-height: 1.3;
  pointer-events: none;
}
.aria-flow .sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (max-width: 520px) {
  .aria-flow .aria-flow__heading h2 { font-size: 36px; }
  .aria-flow .aria-flow__heading p { font-size: 15px; }
  .aria-flow--landing .aria-flow__field { height: 240px; border-radius: 20px; }
  .aria-flow__field .aria-flow__hint { left: 16px; bottom: 25px; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .aria-flow .aria-flow__toggle { transition: none; }
}

/* Background mode: Flow fills the space behind a page's content (landing hero, sign-in screen). */
.aria-flow--bg {
  --aria-flow-primary: var(--ink, #000);
  --aria-flow-secondary: var(--ink3, #7c7c7c);
  --aria-flow-accent: var(--pen, #c0392b);
  pointer-events: none;
}
.aria-flow--bg .aria-flow__field {
  height: 100%;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.aria-flow--hero {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  /* Dissolve into the page before the next section. */
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent);
  mask-image: linear-gradient(to bottom, #000 72%, transparent);
}
.aria-flow--auth {
  position: fixed;
  inset: 0;
  z-index: 0;
  --aria-flow-primary: var(--ag-text, #111);
  --aria-flow-secondary: var(--ag-text-3, #8a8a8a);
  --aria-flow-accent: #c0392b;
}
html[data-theme="dark"] .aria-flow--auth { --aria-flow-accent: #ff7d6d; }
/* Page content stays above the moving background. */
.aria-flow--hero ~ * { position: relative; z-index: 1; }
/* A soft halo in the page colour keeps hero text crisp where strands pass behind it. */
.aria-flow--hero ~ .hero h1, .aria-flow--hero ~ .hero .sub, .aria-flow--hero ~ .hero .trust {
  text-shadow: 0 0 14px var(--ground, #fff), 0 0 28px var(--ground, #fff);
}
/* Dark strands on white read heavier than white on black, so light mode is a touch softer. */
.aria-flow--hero { opacity: .7; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .aria-flow--hero { opacity: 1; } }
:root[data-theme="dark"] .aria-flow--hero { opacity: 1; }