zebflow 0.8.3

Reactive web automation platform — pipelines, templates, and real-time collaboration in a single binary.
Documentation
@import url("https://fonts.googleapis.com/css2?family=Pathway+Extreme:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&family=Roboto:wght@400;500;700;900&family=Roboto+Mono:wght@400;500;700&display=swap");

:root {
  /* Brand colors */
  --color-brand-orange:     #e2a35b;
  --color-brand-orange-ink: #e59068;
  --color-brand-blue:       #005b9a;
  --color-brand-blue-ink:   #004a7a;
  --color-dark-menus: #020202;
  --color-dark-background: #101010;
  --color-dark-border: #2a2a2a;
  --color-dark-accent1: #e59068;
  --color-dark-accent2: #e2a35b;
  --color-dark-accent3: #ba6f61;
  --color-dark-accent4: #c4333b;
  --color-dark-accent5: #d27f64;
  --color-dark-text1: #808080;

  /* Fonts */
  --font-display:
    "Roboto", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-sans:
    "Roboto", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:
    "Roboto Mono", "JetBrains Mono", "SFMono-Regular", monospace;

  --radius-panel: 1.25rem;
  --rwe-nav-color: var(--color-brand-blue);

  /* Global UI component tokens — light defaults, overridden by [data-studio-theme] */
  --color-ui-bg:            #ffffff;
  --color-ui-bg-subtle:     #f9fafb;
  --color-ui-bg-muted:      #f3f4f6;
  --color-ui-border:        #e5e7eb;
  --color-ui-border-subtle: #f3f4f6;
  --color-ui-text:          #111827;
  --color-ui-text-soft:     #4b5563;
  --color-ui-text-muted:    #6b7280;
}

:root[data-theme="dark"] {
}

html {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  accent-color: var(--color-brand-orange);
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-sans);
}

::selection {
  background: #d1d5db;
  color: #111827;
}

a {
  text-underline-offset: 0.16em;
}

button,
input,
textarea,
select {
  font: inherit;
}

[data-zf-surface="panel"] {
  border-radius: var(--radius-panel);
}

@keyframes zf-spin {
  to {
    transform: rotate(360deg);
  }
}