@layer components {
  .tacet-workflows-page {
    --wf-ui-canvas: var(--surface-dim);
    --site-main-seam-surface: var(--wf-ui-canvas);
    --wf-ui-panel: var(--card);
    --wf-ui-panel-raised: var(--background);
    --wf-ui-rule: color-mix(in oklch, var(--border), transparent 8%);
    --wf-ui-rule-strong: color-mix(in oklch, var(--foreground), transparent 72%);
    --wf-ui-muted: var(--text-m);
    --wf-ui-success: var(--grn-on-light);
    --wf-ui-warning: var(--gold-on-light);
    --wf-ui-accent: var(--org-on-light);

    overflow: clip;
    background: var(--background);
    color: var(--foreground);
  }

  .tacet-workflows-page .wf-shell {
    width: min(calc(100% - clamp(2rem, 7vw, 6rem)), 90rem);
    margin-inline: auto;
  }

  .tacet-workflows-page .wf-hero {
    position: relative;
    isolation: isolate;
    padding-block: clamp(4rem, 8vw, 7rem) clamp(3rem, 7vw, 6rem);
    border-bottom: 1px solid var(--wf-ui-rule);
  }

  .tacet-workflows-page .wf-hero::before {
    content: '';
    position: absolute;
    inset: calc(-1 * var(--chrome-height, 0px)) 0 0;
    z-index: -1;
    pointer-events: none;
    background-image:
      radial-gradient(at 78% 22%, oklch(0.69 0.19 56 / 28%), transparent 34%),
      radial-gradient(at 52% 56%, oklch(0.66 0.18 287 / 13%), transparent 36%),
      radial-gradient(at 92% 66%, oklch(0.73 0.196 148 / 10%), transparent 34%),
      linear-gradient(
        104deg,
        transparent,
        oklch(0.69 0.19 56 / 8%) 40%,
        oklch(0.66 0.18 287 / 5%) 58%,
        transparent 80%
      );
  }

  .tacet-workflows-page .wf-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(20rem, 0.8fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
  }

  .tacet-workflows-page .wf-hero__copy,
  .tacet-workflows-page .wf-hero__summary {
    min-width: 0;
  }

  .tacet-workflows-page .wf-hero__copy h1 {
    max-width: 18ch;
    margin: 0;
    color: var(--foreground);
    font-family: var(--font-heading);
    font-size: clamp(2.1rem, 3.5vw, 3.45rem);
    font-weight: 700;
    letter-spacing: var(--tacet-type-hero-track);
    line-height: 1.1;
    text-wrap: balance;
  }

  .tacet-workflows-page .wf-hero__summary {
    display: grid;
    gap: 1.5rem;
    padding-bottom: 0.4rem;
  }

  .tacet-workflows-page .wf-hero__summary > p {
    max-width: 43ch;
    margin: 0;
    color: var(--text-m);
    font-size: clamp(1.05rem, 1.45vw, 1.3rem);
    line-height: 1.55;
  }

  .tacet-workflows-page .wf-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
  }

  .tacet-workflows-page .wf-actions .btn {
    min-height: 3.25rem;
    border-radius: var(--tacet-radius-lg);
    font-family: var(--font-body);
    font-size: var(--fs-btn);
    font-weight: 720;
    letter-spacing: 0;
    text-transform: none;
  }

  .tacet-workflows-page .wf-actions .btn--primary {
    border-color: var(--foreground);
    background: var(--foreground);
    color: var(--background);
    box-shadow: none;
  }

  .tacet-workflows-page .wf-actions .btn--ghost {
    border-color: var(--wf-ui-rule-strong);
    background: transparent;
    color: var(--foreground);
    box-shadow: none;
  }

  .tacet-workflows-page .wf-facts {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: clamp(1rem, 3vw, 2.5rem) 0 0;
    overflow: hidden;
    border: 1px solid var(--wf-ui-rule);
    border-radius: var(--tacet-radius-xl);
    background: color-mix(in oklch, var(--surface-dim), transparent 15%);
  }

  .tacet-workflows-page .wf-facts > div {
    display: flex;
    min-width: 0;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
  }

  .tacet-workflows-page .wf-facts > div + div {
    border-left: 1px solid var(--wf-ui-rule);
  }

  .tacet-workflows-page .wf-facts dt {
    color: var(--wf-ui-muted);
    font-size: var(--fs-xs);
    line-height: 1.3;
  }

  .tacet-workflows-page .wf-facts dd {
    margin: 0;
    color: var(--foreground);
    font-family: var(--font-mono);
    font-size: clamp(1.4rem, 2.2vw, 2rem);
    font-weight: 700;
    line-height: 1;
  }

  .tacet-workflows-page .wf-product {
    grid-column: 1 / -1;
    min-width: 0;
    margin-top: clamp(0.5rem, 2vw, 1.5rem);
    overflow: hidden;
    border: 1px solid var(--wf-ui-rule-strong);
    border-radius: var(--tacet-radius-2xl);
    background: var(--wf-ui-canvas);
    box-shadow: var(--tacet-shadow-lg);
  }

  .tacet-workflows-page .wf-product button,
  .tacet-workflows-page .wf-story button,
  .tacet-workflows-page .wf-plugin-browser button {
    min-width: 2rem;
    min-height: 2rem;
    border: 0;
    font: inherit;
    cursor: pointer;
  }

  .tacet-workflows-page
    :is(.wf-product button, .wf-story button, .wf-plugin-browser button):focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
  }

  .tacet-workflows-page .wf-product__titlebar {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) auto minmax(4rem, 1fr);
    gap: 1rem;
    align-items: center;
    min-height: 3.5rem;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--wf-ui-rule);
    background: var(--wf-ui-panel);
  }

  .tacet-workflows-page .wf-product__brand {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.65rem;
    color: var(--foreground);
    font-size: var(--fs-xs);
    font-weight: 680;
  }

  .tacet-workflows-page .wf-product__mark {
    display: inline-grid;
    width: 1.75rem;
    height: 1.75rem;
    place-items: center;
    border: 1px solid var(--wf-ui-rule-strong);
    border-radius: var(--tacet-radius-md);
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    font-weight: 800;
  }

  .tacet-workflows-page .wf-product__scene-tabs {
    display: flex;
    max-width: 100%;
    gap: 0.2rem;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .tacet-workflows-page .wf-product__scene-tabs::-webkit-scrollbar {
    display: none;
  }

  .tacet-workflows-page .wf-product__scene-tab,
  .tacet-workflows-page .wf-product__play {
    border-radius: var(--tacet-radius-md);
    background: transparent;
    color: var(--wf-ui-muted);
    font-size: var(--fs-xs);
    font-weight: 630;
    white-space: nowrap;
  }

  .tacet-workflows-page .wf-product__scene-tab {
    padding-inline: 0.7rem;
  }

  .tacet-workflows-page .wf-product__scene-tab[aria-selected='true'] {
    background: var(--surface-container);
    color: var(--foreground);
  }

  .tacet-workflows-page .wf-product__play {
    justify-self: end;
    border: 1px solid var(--wf-ui-rule) !important;
    padding-inline: 0.8rem;
    background: var(--wf-ui-panel-raised);
    color: var(--foreground);
  }

  .tacet-workflows-page .wf-product__body {
    display: grid;
    min-height: 42rem;
    grid-template-columns: 12.5rem minmax(0, 1fr);
  }

  .tacet-workflows-page .wf-product__sidebar {
    display: flex;
    min-width: 0;
    flex-direction: column;
    border-right: 1px solid var(--wf-ui-rule);
    background: var(--surface-dim);
  }

  .tacet-workflows-page .wf-product__app {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.65rem;
    padding: 1rem;
    border-bottom: 1px solid var(--wf-ui-rule);
  }

  .tacet-workflows-page .wf-product__app > span {
    display: inline-grid;
    width: 1.75rem;
    height: 1.75rem;
    flex: none;
    place-items: center;
    border-radius: var(--tacet-radius-md);
    background: var(--foreground);
    color: var(--background);
    font-size: var(--fs-label);
    font-weight: 720;
  }

  .tacet-workflows-page .wf-product__app strong {
    overflow: hidden;
    font-size: var(--fs-xs);
    font-weight: 680;
    line-height: 1.25;
    text-overflow: ellipsis;
  }

  .tacet-workflows-page .wf-product__sidebar nav {
    display: grid;
    gap: 0.2rem;
    padding: 0.75rem;
  }

  .tacet-workflows-page .wf-product__sidebar nav span,
  .tacet-workflows-page .wf-product__sidebar-foot {
    padding: 0.55rem 0.65rem;
    border-radius: var(--tacet-radius-md);
    color: var(--wf-ui-muted);
    font-size: var(--fs-xs);
    line-height: 1.2;
  }

  .tacet-workflows-page .wf-product__sidebar nav span.is-active {
    background: color-mix(in oklch, var(--foreground), transparent 94%);
    color: var(--foreground);
    font-weight: 680;
  }

  .tacet-workflows-page .wf-product__sidebar-foot {
    margin: auto 0.75rem 0.75rem;
  }

  .tacet-workflows-page .wf-product__workspace,
  .tacet-workflows-page .wf-scene {
    min-width: 0;
    min-height: 100%;
  }

  .tacet-workflows-page .wf-scene[hidden],
  .tacet-workflows-page .wf-record-scene[hidden],
  .tacet-workflows-page .wf-plugin-grid > li[hidden] {
    display: none;
  }

  .tacet-workflows-page .wf-scene {
    background: var(--wf-ui-canvas);
  }

  .tacet-workflows-page .wf-scene__header {
    display: flex;
    min-height: 4.6rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--wf-ui-rule);
    background: var(--wf-ui-panel);
  }

  .tacet-workflows-page .wf-scene__header > div:first-child {
    min-width: 0;
  }

  .tacet-workflows-page .wf-scene__header span,
  .tacet-workflows-page .wf-canvas__instruction > span,
  .tacet-workflows-page .wf-inspector__head span,
  .tacet-workflows-page .wf-inspector__plugins > span {
    color: var(--wf-ui-muted);
    font-size: var(--fs-label);
    font-weight: 620;
    line-height: 1.2;
  }

  .tacet-workflows-page .wf-scene__header h2 {
    max-width: none;
    margin: 0.25rem 0 0;
    color: var(--foreground);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
    text-transform: none;
  }

  .tacet-workflows-page .wf-scene__header-state {
    display: flex;
    flex: none;
    align-items: center;
    gap: 0.6rem;
  }

  .tacet-workflows-page :is(.wf-version, .wf-saved) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.75rem;
    padding-inline: 0.55rem;
    border: 1px solid var(--wf-ui-rule);
    border-radius: var(--tacet-radius-md);
    background: var(--wf-ui-panel-raised);
    font-family: var(--font-mono);
  }

  .tacet-workflows-page .wf-saved {
    border-color: color-mix(in oklch, var(--wf-ui-success), transparent 72%);
    background: color-mix(in oklch, var(--grn), transparent 92%);
    color: var(--wf-ui-success);
  }

  .tacet-workflows-page .wf-scene__header-state button {
    min-height: 2.15rem;
    padding-inline: 0.85rem;
    border: 1px solid var(--foreground);
    border-radius: var(--tacet-radius-md);
    background: var(--foreground);
    color: var(--background);
    font-size: var(--fs-xs);
    font-weight: 680;
  }

  .tacet-workflows-page .wf-scene__content {
    display: grid;
    min-height: calc(42rem - 4.6rem);
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.32fr);
  }

  .tacet-workflows-page .wf-canvas {
    min-width: 0;
    padding: clamp(1rem, 3vw, 2.5rem);
    background-image: radial-gradient(var(--border) 0.7px, transparent 0.7px);
    background-size: 1.1rem 1.1rem;
  }

  .tacet-workflows-page .wf-canvas__instruction {
    max-width: 52rem;
    margin-inline: auto;
    padding: 0.9rem 1rem;
    border: 1px solid var(--wf-ui-rule);
    border-radius: var(--tacet-radius-lg);
    background: color-mix(in oklch, var(--wf-ui-panel), transparent 4%);
    box-shadow: var(--tacet-shadow-xs);
  }

  .tacet-workflows-page .wf-canvas__instruction p {
    margin: 0.25rem 0 0;
    color: var(--foreground);
    font-size: clamp(0.8rem, 1.1vw, 0.95rem);
    line-height: 1.45;
  }

  .tacet-workflows-page .wf-node-flow {
    display: grid;
    max-width: 58rem;
    grid-template-columns: repeat(4, minmax(8.5rem, 1fr));
    gap: 1.15rem;
    align-items: center;
    margin: clamp(4rem, 9vw, 7rem) auto 0;
    padding: 0;
    list-style: none;
  }

  .tacet-workflows-page .wf-node {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 10rem;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.75rem;
    align-content: start;
    padding: 1rem;
    border: 1px solid var(--wf-ui-rule);
    border-radius: var(--tacet-radius-lg);
    background: var(--wf-ui-panel);
    box-shadow: var(--tacet-shadow-xs);
    transition:
      border-color 180ms ease,
      box-shadow 180ms ease,
      transform 180ms ease;
  }

  .tacet-workflows-page .wf-node:not(:last-child)::after {
    position: absolute;
    left: calc(100% + 1px);
    top: 50%;
    width: calc(1.15rem + 1px);
    height: 1px;
    background: var(--wf-ui-rule-strong);
    content: '';
  }

  .tacet-workflows-page .wf-node.is-running {
    border-color: var(--wf-ui-accent);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--org), transparent 86%);
    transform: translateY(-0.2rem);
  }

  .tacet-workflows-page .wf-node.is-complete {
    background: color-mix(in oklch, var(--wf-ui-panel), var(--grn) 4%);
  }

  .tacet-workflows-page .wf-node.is-waiting {
    background: color-mix(in oklch, var(--wf-ui-panel), var(--ylw) 4%);
  }

  .tacet-workflows-page .wf-node__state {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: var(--tacet-radius-full);
    background: var(--wf-ui-rule-strong);
  }

  .tacet-workflows-page .wf-node.is-running .wf-node__state {
    background: var(--org);
    animation: wf-pulse 1.2s ease-in-out infinite;
  }

  .tacet-workflows-page .wf-node.is-complete .wf-node__state {
    background: var(--grn);
  }

  .tacet-workflows-page .wf-node.is-waiting .wf-node__state {
    background: var(--ylw);
  }

  .tacet-workflows-page .wf-node__icon {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border: 1px solid var(--wf-ui-rule);
    border-radius: var(--tacet-radius-md);
    background: var(--surface-dim);
    color: var(--foreground);
  }

  .tacet-workflows-page .wf-node__icon .ui-icon {
    width: 0.95rem;
    height: 0.95rem;
  }

  .tacet-workflows-page .wf-node__copy {
    display: grid;
    min-width: 0;
    gap: 0.3rem;
  }

  .tacet-workflows-page .wf-node__copy small,
  .tacet-workflows-page .wf-node__copy > span {
    color: var(--wf-ui-muted);
    font-size: var(--fs-label);
    line-height: 1.35;
  }

  .tacet-workflows-page .wf-node__copy small {
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .tacet-workflows-page .wf-node__copy strong {
    color: var(--foreground);
    font-size: var(--fs-xs);
    font-weight: 680;
    line-height: 1.3;
  }

  .tacet-workflows-page .wf-node__badge {
    grid-column: 1 / -1;
    align-self: end;
    justify-self: start;
    margin-top: auto;
    padding: 0.25rem 0.45rem;
    border-radius: var(--tacet-radius-sm);
    background: var(--surface-dim);
    color: var(--wf-ui-muted);
    font-size: var(--fs-micro);
    font-weight: 680;
  }

  .tacet-workflows-page .wf-node.is-running .wf-node__badge {
    background: color-mix(in oklch, var(--org), transparent 90%);
    color: var(--wf-ui-accent);
  }

  .tacet-workflows-page .wf-node.is-complete .wf-node__badge {
    background: color-mix(in oklch, var(--grn), transparent 90%);
    color: var(--wf-ui-success);
  }

  .tacet-workflows-page .wf-node.is-waiting .wf-node__badge {
    background: color-mix(in oklch, var(--ylw), transparent 86%);
    color: var(--gold-on-light);
  }

  .tacet-workflows-page .wf-inspector {
    min-width: 0;
    padding: 1rem;
    border-left: 1px solid var(--wf-ui-rule);
    background: var(--wf-ui-panel);
  }

  .tacet-workflows-page .wf-inspector__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--wf-ui-rule);
  }

  .tacet-workflows-page .wf-inspector__head div {
    display: grid;
    gap: 0.25rem;
  }

  .tacet-workflows-page .wf-inspector__head strong {
    color: var(--foreground);
    font-size: var(--fs-xs);
    font-weight: 680;
  }

  .tacet-workflows-page .wf-inspector__pulse {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: var(--tacet-radius-full);
    background: var(--wf-ui-rule-strong);
  }

  .tacet-workflows-page [data-wf-demo][data-running='true'] .wf-inspector__pulse {
    background: var(--org);
    animation: wf-pulse 1.2s ease-in-out infinite;
  }

  .tacet-workflows-page .wf-inspector dl {
    display: grid;
    margin: 1rem 0 0;
  }

  .tacet-workflows-page .wf-inspector dl > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.55rem;
    border-bottom: 1px solid var(--wf-ui-rule);
  }

  .tacet-workflows-page .wf-inspector dt {
    color: var(--wf-ui-muted);
    font-size: var(--fs-label);
  }

  .tacet-workflows-page .wf-inspector dd {
    margin: 0;
    color: var(--foreground);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    font-weight: 650;
    text-align: right;
  }

  .tacet-workflows-page .wf-inspector__plugins {
    margin-top: 1rem;
  }

  .tacet-workflows-page .wf-inspector__plugins ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.6rem 0 0;
    padding: 0;
    list-style: none;
  }

  .tacet-workflows-page .wf-inspector__plugins li {
    padding: 0.3rem 0.45rem;
    border: 1px solid var(--wf-ui-rule);
    border-radius: var(--tacet-radius-md);
    background: var(--surface-dim);
    color: var(--foreground);
    font-size: var(--fs-micro);
    font-weight: 620;
  }

  .tacet-workflows-page .wf-run-events {
    display: grid;
    gap: 0.7rem;
    margin: 1rem 0 0;
    padding: 1rem 0 0;
    border-top: 1px solid var(--wf-ui-rule);
    list-style: none;
  }

  .tacet-workflows-page .wf-run-events li {
    display: grid;
    grid-template-columns: 0.55rem minmax(0, 1fr);
    gap: 0.55rem;
    align-items: start;
    opacity: 0.46;
    transition: opacity 180ms ease;
  }

  .tacet-workflows-page .wf-run-events li > span {
    width: 0.4rem;
    height: 0.4rem;
    margin-top: 0.25rem;
    border-radius: var(--tacet-radius-full);
    background: var(--wf-ui-rule-strong);
  }

  .tacet-workflows-page .wf-run-events li.is-active,
  .tacet-workflows-page .wf-run-events li.is-complete {
    opacity: 1;
  }

  .tacet-workflows-page .wf-run-events li.is-active > span {
    background: var(--org);
  }

  .tacet-workflows-page .wf-run-events li.is-complete > span {
    background: var(--grn);
  }

  .tacet-workflows-page .wf-run-events p {
    display: grid;
    gap: 0.15rem;
    margin: 0;
    color: var(--wf-ui-muted);
    font-size: var(--fs-label);
    line-height: 1.35;
  }

  .tacet-workflows-page .wf-run-events strong {
    color: var(--foreground);
    font-weight: 680;
  }

  .tacet-workflows-page .wf-product__note {
    margin: 0;
    padding: 0.65rem 0.9rem;
    border-top: 1px solid var(--wf-ui-rule);
    background: var(--wf-ui-panel);
    color: var(--wf-ui-muted);
    font-size: var(--fs-label);
    line-height: 1.35;
  }

  .tacet-workflows-page :is(#workflow-run, #apps-plugins, #controls, #architecture) {
    scroll-margin-top: calc(var(--chrome-height, 5.5rem) + 4.5rem);
  }

  .tacet-workflows-page .wf-section {
    padding-block: clamp(4.5rem, 9vw, 8rem);
    border-bottom: 1px solid var(--wf-ui-rule);
    background: var(--background);
  }

  .tacet-workflows-page .wf-section--soft {
    background: var(--surface-dim);
  }

  .tacet-workflows-page .wf-section-head {
    display: grid;
    max-width: 56rem;
    gap: 1.25rem;
    margin-bottom: clamp(2.5rem, 6vw, 5rem);
  }

  .tacet-workflows-page .wf-section-head--split {
    max-width: none;
    grid-template-columns: minmax(0, 1.1fr) minmax(20rem, 0.62fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: end;
  }

  .tacet-workflows-page .wf-section-head h2,
  .tacet-workflows-page .wf-final h2 {
    max-width: 16ch;
    margin: 0;
    color: var(--foreground);
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 5.5vw, 5rem);
    font-weight: 760;
    letter-spacing: -0.04em;
    line-height: 0.94;
    text-transform: none;
    text-wrap: balance;
  }

  .tacet-workflows-page .wf-section-head p {
    max-width: 48ch;
    margin: 0;
    color: var(--wf-ui-muted);
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    line-height: 1.58;
  }

  .tacet-workflows-page .wf-story {
    display: grid;
    grid-template-columns: minmax(19rem, 0.72fr) minmax(0, 1.28fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: start;
  }

  .tacet-workflows-page .wf-story__chapters {
    display: grid;
  }

  .tacet-workflows-page .wf-story__chapter {
    display: grid;
    min-height: 42vh;
    align-content: center;
    padding-block: clamp(1.5rem, 4vw, 3rem);
    border-top: 1px solid var(--wf-ui-rule);
    opacity: 0.52;
    transition: opacity 180ms ease;
  }

  .tacet-workflows-page .wf-story__chapter:last-child {
    border-bottom: 1px solid var(--wf-ui-rule);
  }

  .tacet-workflows-page .wf-story__chapter.is-active {
    opacity: 1;
  }

  .tacet-workflows-page .wf-story__chapter button {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 1rem;
    padding: 0;
    background: transparent;
    color: var(--foreground);
    text-align: left;
  }

  .tacet-workflows-page .wf-story__chapter button > span:first-child {
    color: var(--wf-ui-accent);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 700;
  }

  .tacet-workflows-page .wf-story__chapter button > span:last-child {
    display: grid;
    gap: 0.55rem;
  }

  .tacet-workflows-page .wf-story__chapter small {
    color: var(--wf-ui-muted);
    font-size: var(--fs-xs);
    font-weight: 620;
  }

  .tacet-workflows-page .wf-story__chapter strong {
    max-width: 24ch;
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 2.5vw, 2.2rem);
    font-weight: 720;
    letter-spacing: -0.025em;
    line-height: 1.02;
  }

  .tacet-workflows-page .wf-story__chapter > p {
    max-width: 48ch;
    margin: 1rem 0 0 3.5rem;
    color: var(--wf-ui-muted);
    font-size: 0.95rem;
    line-height: 1.55;
  }

  .tacet-workflows-page .wf-story__sticky {
    position: sticky;
    top: calc(var(--chrome-height, 0px) + 5rem);
    min-width: 0;
  }

  .tacet-workflows-page .wf-record-surface {
    min-height: min(70vh, 43rem);
    overflow: hidden;
    border: 1px solid var(--wf-ui-rule-strong);
    border-radius: var(--tacet-radius-xl);
    background: var(--wf-ui-panel);
    box-shadow: var(--tacet-shadow-md);
  }

  .tacet-workflows-page .wf-record-scene {
    display: grid;
    min-height: min(70vh, 43rem);
    grid-template-rows: auto auto 1fr auto auto;
  }

  .tacet-workflows-page .wf-record-scene > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--wf-ui-rule);
  }

  .tacet-workflows-page .wf-record-scene > header span,
  .tacet-workflows-page .wf-record-scene > footer {
    color: var(--wf-ui-muted);
    font-size: 0.875rem;
  }

  .tacet-workflows-page .wf-record-scene > header h3 {
    margin: 0.25rem 0 0;
    color: var(--foreground);
    font-family: var(--font-body);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
    text-transform: none;
  }

  .tacet-workflows-page .wf-record-status {
    display: inline-flex;
    min-height: 1.9rem;
    align-items: center;
    padding-inline: 0.6rem;
    border: 1px solid color-mix(in oklch, var(--ylw), transparent 58%);
    border-radius: var(--tacet-radius-full);
    background: color-mix(in oklch, var(--ylw), transparent 88%);
    color: var(--gold-on-light) !important;
    font-weight: 680;
  }

  .tacet-workflows-page .wf-record-table {
    margin: 1rem;
    overflow: hidden;
    border: 1px solid var(--wf-ui-rule);
    border-radius: var(--tacet-radius-lg);
  }

  .tacet-workflows-page :is(.wf-record-table__head, .wf-record-table__row) {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .tacet-workflows-page .wf-record-table__head {
    border-bottom: 1px solid var(--wf-ui-rule);
    background: var(--surface-dim);
  }

  .tacet-workflows-page .wf-record-table__head span,
  .tacet-workflows-page .wf-record-table__row strong {
    min-width: 0;
    padding: 0.65rem 0.75rem;
    overflow: hidden;
    font-size: 0.875rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tacet-workflows-page .wf-record-table__head span {
    color: var(--wf-ui-muted);
    font-weight: 620;
  }

  .tacet-workflows-page .wf-record-table__row strong {
    color: var(--foreground);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 640;
  }

  .tacet-workflows-page .wf-record-route {
    display: grid;
    gap: 0.65rem;
    align-content: center;
    padding: clamp(1rem, 3vw, 2rem);
  }

  .tacet-workflows-page .wf-record-route span {
    display: flex;
    min-height: 2.4rem;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--wf-ui-rule);
    border-radius: var(--tacet-radius-md);
    background: var(--wf-ui-panel-raised);
    color: var(--foreground);
    font-size: var(--fs-xs);
    font-weight: 640;
  }

  .tacet-workflows-page .wf-record-route i {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: var(--tacet-radius-full);
    background: var(--grn);
  }

  .tacet-workflows-page .wf-mini-flow {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    overflow: visible;
  }

  .tacet-workflows-page .wf-mini-flow--record {
    align-items: center;
    padding: clamp(1rem, 3vw, 2rem);
    border-block: 1px solid var(--wf-ui-rule);
    background-image: radial-gradient(var(--wf-ui-rule-strong) 0.6px, transparent 0.6px);
    background-size: 1rem 1rem;
  }

  .tacet-workflows-page .wf-mini-node {
    width: min(100%, 28rem);
    min-width: 0;
    min-height: 8.5rem;
    flex: none;
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--wf-ui-rule-strong);
    border-radius: var(--tacet-radius-md);
    background: var(--wf-ui-panel-raised);
    box-shadow: var(--tacet-shadow-xs);
    color: var(--foreground);
    text-align: left;
    transition:
      border-color 160ms ease,
      box-shadow 160ms ease;
  }

  .tacet-workflows-page .wf-mini-node:hover,
  .tacet-workflows-page .wf-mini-node:focus-visible,
  .tacet-workflows-page .wf-mini-node.is-open {
    border-color: var(--foreground);
    outline: none;
    box-shadow:
      0 0 0 2px color-mix(in oklch, var(--foreground), transparent 88%),
      var(--tacet-shadow-sm);
  }

  .tacet-workflows-page .wf-mini-node__main {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr) 1.25rem;
    gap: 0.75rem;
    align-items: center;
    padding: 0.9rem 1rem 0.55rem;
  }

  .tacet-workflows-page .wf-mini-node__main > i {
    display: inline-grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    border-radius: var(--tacet-radius-sm);
    background: var(--surface-dim);
    color: var(--foreground);
    font-style: normal;
  }

  .tacet-workflows-page .wf-mini-node__main > i .wf-ui-icon {
    width: 1.125rem;
    height: 1.125rem;
  }

  .tacet-workflows-page .wf-mini-node__title {
    display: grid;
    min-width: 0;
    gap: 0.2rem;
  }

  .tacet-workflows-page .wf-mini-node__title small {
    order: 2;
    overflow: hidden;
    color: var(--wf-ui-muted);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tacet-workflows-page .wf-mini-node__title strong {
    overflow: hidden;
    color: var(--foreground);
    font-family: var(--font-body);
    font-size: 1.0625rem;
    font-weight: 650;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tacet-workflows-page .wf-mini-node__toggle {
    display: inline-grid;
    width: 1.75rem;
    height: 1.75rem;
    place-items: center;
    border-radius: var(--tacet-radius-sm);
    color: var(--wf-ui-muted);
  }

  .tacet-workflows-page .wf-mini-node__toggle .wf-ui-icon {
    width: 0.9rem;
    height: 0.9rem;
    transition: transform 160ms ease;
    transform: rotate(90deg);
  }

  .tacet-workflows-page .wf-mini-node.is-open .wf-mini-node__toggle .wf-ui-icon {
    transform: rotate(-90deg);
  }

  .tacet-workflows-page .wf-mini-node__context {
    display: block;
    margin: 0 1rem 0.55rem;
    overflow: hidden;
    padding: 0.55rem 0.65rem;
    border-radius: var(--tacet-radius-sm);
    background: var(--surface-dim);
    color: var(--wf-ui-muted);
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tacet-workflows-page .wf-mini-node__footer {
    display: flex;
    min-height: 2.2rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.2rem 1rem 0.75rem;
    color: var(--wf-ui-muted);
    font-size: 0.875rem;
  }

  .tacet-workflows-page .wf-mini-node__footer > span:last-child {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
  }

  .tacet-workflows-page .wf-mini-node__footer i {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: var(--tacet-radius-full);
    background: var(--grn);
  }

  .tacet-workflows-page .wf-mini-node__details {
    display: grid;
    gap: 0.7rem;
    padding: 0.85rem 1rem 1rem;
    border-top: 1px solid var(--wf-ui-rule);
    background: var(--background);
  }

  .tacet-workflows-page .wf-mini-node__details[hidden] {
    display: none;
  }

  .tacet-workflows-page .wf-mini-node__details > span {
    display: grid;
    gap: 0.2rem;
  }

  .tacet-workflows-page .wf-mini-node__details small {
    color: var(--wf-ui-muted);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
  }

  .tacet-workflows-page .wf-mini-node__details strong {
    color: var(--foreground);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 560;
    line-height: 1.4;
  }

  .tacet-workflows-page .wf-mini-flow__edge {
    position: relative;
    width: 1px;
    height: 1.25rem;
    min-height: 1.25rem;
    flex: 0 0 1.25rem;
    align-self: center;
    background: var(--wf-ui-rule-strong);
  }

  .tacet-workflows-page .wf-mini-flow__edge::after {
    position: absolute;
    right: auto;
    bottom: -1px;
    left: 50%;
    width: 0.35rem;
    height: 0.35rem;
    border-top: 1px solid var(--wf-ui-rule-strong);
    border-right: 1px solid var(--wf-ui-rule-strong);
    content: '';
    transform: translateX(-50%) rotate(135deg);
  }

  .tacet-workflows-page .wf-mini-flow--card {
    margin-top: 0.25rem;
    padding-block: 0.5rem;
  }

  .tacet-workflows-page .wf-mini-flow--card .wf-mini-node,
  .tacet-workflows-page .wf-mini-flow--control .wf-mini-node {
    width: 100%;
  }

  .tacet-workflows-page .wf-mini-flow--card .wf-mini-flow__edge,
  .tacet-workflows-page .wf-mini-flow--control .wf-mini-flow__edge {
    min-height: 0.9rem;
    flex-basis: 0.75rem;
  }

  .tacet-workflows-page .wf-record-review {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.8rem;
    align-items: center;
    margin: 0 1rem 1rem;
    padding: 0.9rem;
    border: 1px solid color-mix(in oklch, var(--org), transparent 58%);
    border-radius: var(--tacet-radius-lg);
    background: color-mix(in oklch, var(--org), transparent 94%);
  }

  .tacet-workflows-page .wf-record-review > span {
    display: inline-grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    border-radius: var(--tacet-radius-md);
    background: var(--wf-ui-panel);
    color: var(--wf-ui-accent);
  }

  .tacet-workflows-page .wf-record-review > div {
    display: grid;
    gap: 0.15rem;
  }

  .tacet-workflows-page .wf-record-review small,
  .tacet-workflows-page .wf-record-review p {
    margin: 0;
    color: var(--wf-ui-muted);
    font-size: 0.875rem;
    line-height: 1.35;
  }

  .tacet-workflows-page .wf-record-review strong {
    color: var(--foreground);
    font-size: 1.0625rem;
  }

  .tacet-workflows-page .wf-record-review button {
    min-height: 2.25rem;
    padding-inline: 0.75rem;
    border-radius: var(--tacet-radius-md);
    background: var(--foreground);
    color: var(--background);
    font-size: 0.9375rem;
    font-weight: 680;
  }

  .tacet-workflows-page .wf-record-review.is-approved {
    border-color: color-mix(in oklch, var(--grn), transparent 58%);
    background: color-mix(in oklch, var(--grn), transparent 94%);
  }

  .tacet-workflows-page .wf-record-review.is-approved button {
    background: var(--wf-ui-success);
    color: var(--background);
  }

  .tacet-workflows-page .wf-record-scene > footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.6rem 1rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--wf-ui-rule);
    background: var(--surface-dim);
  }

  .tacet-workflows-page .wf-inventory-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--wf-ui-rule);
    border-radius: var(--tacet-radius-xl);
    background: var(--background);
  }

  .tacet-workflows-page .wf-inventory-summary > div {
    display: grid;
    gap: 0.5rem;
    padding: clamp(1rem, 2.5vw, 1.6rem);
  }

  .tacet-workflows-page .wf-inventory-summary > div + div {
    border-left: 1px solid var(--wf-ui-rule);
  }

  .tacet-workflows-page .wf-inventory-summary strong {
    color: var(--foreground);
    font-family: var(--font-mono);
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 690;
    line-height: 1;
  }

  .tacet-workflows-page .wf-inventory-summary span {
    color: var(--wf-ui-muted);
    font-size: var(--fs-xs);
    line-height: 1.4;
  }

  .tacet-workflows-page .wf-app-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 1rem;
    overflow: hidden;
    border: 1px solid var(--wf-ui-rule);
    border-radius: var(--tacet-radius-xl);
    background: var(--background);
  }

  .tacet-workflows-page .wf-app-grid article {
    display: grid;
    min-width: 0;
    gap: 0.75rem;
    padding: clamp(1rem, 2.3vw, 1.5rem);
  }

  .tacet-workflows-page .wf-app-grid article + article {
    border-left: 1px solid var(--wf-ui-rule);
  }

  .tacet-workflows-page .wf-app-grid article:nth-child(2n + 1) {
    border-left: 0;
  }

  .tacet-workflows-page .wf-app-grid article:nth-child(n + 3) {
    border-top: 1px solid var(--wf-ui-rule);
  }

  .tacet-workflows-page .wf-app-grid article > span {
    color: var(--wf-ui-accent);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 680;
  }

  .tacet-workflows-page .wf-app-grid h3 {
    margin: 0;
    color: var(--foreground);
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
    text-transform: none;
  }

  .tacet-workflows-page .wf-app-grid p {
    margin: 0;
    color: var(--wf-ui-muted);
    font-size: 1rem;
    line-height: 1.4;
  }

  .tacet-workflows-page .wf-app-grid ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: auto 0 0;
    padding: 1rem 0 0;
    list-style: none;
  }

  .tacet-workflows-page .wf-app-grid li {
    display: inline-flex;
    min-height: 2.35rem;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.4rem;
    border: 1px solid var(--wf-ui-rule);
    border-radius: var(--tacet-radius-sm);
    color: var(--wf-ui-muted);
    font-size: 0.875rem;
  }

  .tacet-workflows-page .wf-plugin-chip__mark {
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
  }

  .tacet-workflows-page .wf-plugin-browser {
    margin-top: clamp(2.5rem, 6vw, 5rem);
    overflow: hidden;
    border: 1px solid var(--wf-ui-rule);
    border-radius: var(--tacet-radius-xl);
    background: var(--background);
  }

  .tacet-workflows-page .wf-plugin-browser__head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.5rem;
    align-items: end;
    padding: 1.25rem;
    border-bottom: 1px solid var(--wf-ui-rule);
  }

  .tacet-workflows-page .wf-plugin-browser__head > div:first-child {
    display: grid;
    min-width: 12rem;
    gap: 0.25rem;
  }

  .tacet-workflows-page .wf-plugin-browser__head span,
  .tacet-workflows-page .wf-plugin-browser > p {
    color: var(--wf-ui-muted);
    font-size: 0.875rem;
    line-height: 1.4;
  }

  .tacet-workflows-page .wf-plugin-browser__head strong {
    color: var(--foreground);
    font-size: 1.0625rem;
  }

  .tacet-workflows-page .wf-plugin-filters {
    display: flex;
    justify-content: flex-end;
    gap: 0.35rem;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .tacet-workflows-page .wf-plugin-filters::-webkit-scrollbar {
    display: none;
  }

  .tacet-workflows-page .wf-plugin-filters button {
    flex: none;
    min-height: 2.75rem;
    padding-inline: 0.9rem;
    border: 1px solid var(--wf-ui-rule);
    border-radius: var(--tacet-radius-full);
    background: var(--background);
    color: var(--wf-ui-muted);
    font-size: 0.9375rem;
    font-weight: 620;
  }

  .tacet-workflows-page .wf-plugin-filters button[aria-pressed='true'] {
    border-color: var(--foreground);
    background: var(--foreground);
    color: var(--background);
  }

  .tacet-workflows-page .wf-plugin-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .tacet-workflows-page .wf-plugin-grid > li {
    display: grid;
    min-height: 5.75rem;
    min-width: 0;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    gap: 0.2rem 0.8rem;
    align-items: center;
    padding: 1rem;
    border-right: 1px solid var(--wf-ui-rule);
    border-bottom: 1px solid var(--wf-ui-rule);
  }

  .tacet-workflows-page .wf-plugin-grid > li:nth-child(4n) {
    border-right: 0;
  }

  .tacet-workflows-page .wf-plugin-grid .wf-plugin-logo {
    display: inline-grid;
    width: 2.75rem;
    height: 2.75rem;
    grid-row: 1 / 3;
    place-items: center;
    border: 1px solid var(--wf-ui-rule);
    border-radius: var(--tacet-radius-lg);
    background: var(--background);
  }

  .tacet-workflows-page .wf-plugin-logo__mark {
    display: block;
    width: 1.65rem;
    height: 1.65rem;
  }

  .tacet-workflows-page .wf-plugin-grid strong {
    overflow: hidden;
    color: var(--foreground);
    font-family: var(--font-body);
    font-size: 1.0625rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tacet-workflows-page .wf-plugin-grid small {
    color: var(--wf-ui-muted);
    font-family: var(--font-body);
    font-size: 0.875rem;
  }

  .tacet-workflows-page .wf-plugin-browser > p {
    margin: 0;
    padding: 0.75rem 1rem;
  }

  .tacet-workflows-page .wf-control-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--wf-ui-rule);
    border-radius: var(--tacet-radius-xl);
  }

  .tacet-workflows-page .wf-control-grid > article {
    display: grid;
    min-height: 30rem;
    gap: 1rem;
    align-content: start;
    padding: clamp(1.25rem, 3vw, 2rem);
    background: var(--background);
  }

  .tacet-workflows-page .wf-control-grid > article + article {
    border-left: 1px solid var(--wf-ui-rule);
  }

  .tacet-workflows-page .wf-control-grid article > span {
    color: var(--wf-ui-accent);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 680;
  }

  .tacet-workflows-page .wf-control-grid h3 {
    max-width: 19ch;
    margin: 0;
    color: var(--foreground);
    font-family: var(--font-heading);
    font-size: clamp(1.55rem, 2.4vw, 2.15rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.02;
    text-transform: none;
  }

  .tacet-workflows-page .wf-control-grid p {
    max-width: 38ch;
    margin: 0;
    color: var(--wf-ui-muted);
    font-size: 0.95rem;
    line-height: 1.55;
  }

  .tacet-workflows-page .wf-mini-flow--control {
    margin-top: auto;
    padding: 1rem;
    border: 1px solid var(--wf-ui-rule);
    border-radius: var(--tacet-radius-lg);
    background-image: radial-gradient(var(--wf-ui-rule-strong) 0.6px, transparent 0.6px);
    background-size: 1rem 1rem;
  }

  .tacet-workflows-page .wf-control-object {
    margin-top: auto;
    overflow: hidden;
    border: 1px solid var(--wf-ui-rule);
    border-radius: var(--tacet-radius-lg);
    background: var(--surface-dim);
  }

  .tacet-workflows-page .wf-control-object--table {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tacet-workflows-page .wf-control-object--table :is(span, strong) {
    min-width: 0;
    padding: 0.6rem;
    overflow: hidden;
    font-size: var(--fs-label);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tacet-workflows-page .wf-control-object--table span {
    border-bottom: 1px solid var(--wf-ui-rule);
    color: var(--wf-ui-muted);
    font-weight: 600;
  }

  .tacet-workflows-page .wf-control-object--table strong {
    color: var(--foreground);
    font-family: var(--font-mono);
    font-weight: 650;
  }

  .tacet-workflows-page .wf-control-object--approval {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
  }

  .tacet-workflows-page .wf-control-object--approval i {
    display: inline-grid;
    width: 2.5rem;
    height: 2.5rem;
    flex: none;
    place-items: center;
    border-radius: var(--tacet-radius-md);
    background: color-mix(in oklch, var(--org), transparent 90%);
    color: var(--wf-ui-accent);
  }

  .tacet-workflows-page .wf-control-object--approval span {
    display: grid;
    gap: 0.25rem;
  }

  .tacet-workflows-page .wf-control-object--approval small {
    color: var(--wf-ui-muted);
    font-size: var(--fs-label);
  }

  .tacet-workflows-page .wf-control-object--approval strong {
    color: var(--foreground);
    font-size: var(--fs-xs);
  }

  .tacet-workflows-page .wf-control-object--commits {
    display: grid;
  }

  .tacet-workflows-page .wf-control-object--commits > span {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.55rem;
    align-items: center;
    padding: 0.65rem;
    color: var(--foreground);
    font-size: var(--fs-label);
  }

  .tacet-workflows-page .wf-control-object--commits > span + span {
    border-top: 1px solid var(--wf-ui-rule);
  }

  .tacet-workflows-page .wf-control-object--commits i {
    padding: 0.2rem 0.3rem;
    border-radius: var(--tacet-radius-sm);
    background: color-mix(in oklch, var(--org), transparent 90%);
    color: var(--wf-ui-accent);
    font-family: var(--font-mono);
    font-style: normal;
  }

  .tacet-workflows-page .wf-control-object--commits small {
    color: var(--wf-ui-muted);
  }

  .tacet-workflows-page .wf-final {
    padding-block: clamp(4rem, 9vw, 8rem);
    background: var(--wf-ui-canvas);
  }

  .tacet-workflows-page .wf-final__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: end;
  }

  .tacet-workflows-page .wf-final h2 {
    max-width: 17ch;
    font-size: clamp(2.4rem, 5vw, 4.7rem);
  }

  @keyframes wf-pulse {
    0%,
    100% {
      opacity: 0.55;
      transform: scale(0.9);
    }

    50% {
      opacity: 1;
      transform: scale(1.15);
    }
  }

  @media (max-width: 74rem) {
    .tacet-workflows-page .wf-product__body {
      grid-template-columns: 10.5rem minmax(0, 1fr);
    }

    .tacet-workflows-page .wf-scene__content {
      grid-template-columns: minmax(0, 1fr) 15rem;
    }

    .tacet-workflows-page .wf-node-flow {
      grid-template-columns: repeat(2, minmax(10rem, 1fr));
      margin-top: 2.5rem;
    }

    .tacet-workflows-page .wf-node:nth-child(2)::after {
      display: none;
    }

    .tacet-workflows-page .wf-node {
      min-height: 8.5rem;
    }

    .tacet-workflows-page .wf-app-grid,
    .tacet-workflows-page .wf-plugin-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tacet-workflows-page .wf-app-grid article:nth-child(2n + 1) {
      border-left: 0;
    }

    .tacet-workflows-page .wf-app-grid article:nth-child(n + 3) {
      border-top: 1px solid var(--wf-ui-rule);
    }

    .tacet-workflows-page .wf-plugin-grid > li:nth-child(2n) {
      border-right: 0;
    }

    .tacet-workflows-page .wf-plugin-grid > li:nth-child(2n + 1) {
      border-right: 1px solid var(--wf-ui-rule);
    }
  }

  @media (max-width: 60rem) {
    .tacet-workflows-page .wf-hero__grid,
    .tacet-workflows-page .wf-section-head--split,
    .tacet-workflows-page .wf-story,
    .tacet-workflows-page .wf-final__inner {
      grid-template-columns: 1fr;
    }

    .tacet-workflows-page .wf-hero__copy h1 {
      max-width: 18ch;
    }

    .tacet-workflows-page .wf-hero__summary {
      max-width: 44rem;
      padding-bottom: 0;
    }

    .tacet-workflows-page .wf-product__body {
      min-height: 0;
      grid-template-columns: 1fr;
    }

    .tacet-workflows-page .wf-product__sidebar {
      display: none;
    }

    .tacet-workflows-page .wf-scene__content {
      min-height: 0;
      grid-template-columns: 1fr;
    }

    .tacet-workflows-page .wf-inspector {
      border-top: 1px solid var(--wf-ui-rule);
      border-left: 0;
    }

    .tacet-workflows-page .wf-story__chapter {
      min-height: auto;
      padding-block: 2rem;
    }

    .tacet-workflows-page .wf-story__sticky {
      position: relative;
      top: auto;
      grid-row: 1;
    }

    .tacet-workflows-page .wf-record-surface,
    .tacet-workflows-page .wf-record-scene {
      min-height: 38rem;
    }

    .tacet-workflows-page .wf-control-grid {
      grid-template-columns: 1fr;
    }

    .tacet-workflows-page .wf-control-grid > article {
      min-height: 22rem;
    }

    .tacet-workflows-page .wf-control-grid > article + article {
      border-top: 1px solid var(--wf-ui-rule);
      border-left: 0;
    }

    .tacet-workflows-page .wf-plugin-browser__head {
      grid-template-columns: 1fr;
      align-items: start;
    }

    .tacet-workflows-page .wf-plugin-filters {
      justify-content: flex-start;
    }
  }

  @media (max-width: 42rem) {
    .tacet-workflows-page .wf-shell {
      width: min(calc(100% - 1.25rem), 90rem);
    }

    .tacet-workflows-page .wf-hero {
      padding-block-start: 3rem;
    }

    .tacet-workflows-page .wf-hero__copy h1 {
      max-width: none;
      font-size: clamp(2.5rem, 10.8vw, 2.85rem);
      line-height: 1.03;
    }

    .tacet-workflows-page .wf-actions,
    .tacet-workflows-page .wf-actions .btn {
      width: 100%;
    }

    .tacet-workflows-page .wf-actions .btn {
      justify-content: center;
    }

    .tacet-workflows-page .wf-facts,
    .tacet-workflows-page .wf-inventory-summary,
    .tacet-workflows-page .wf-app-grid,
    .tacet-workflows-page .wf-plugin-grid {
      grid-template-columns: 1fr;
    }

    .tacet-workflows-page .wf-facts > div + div,
    .tacet-workflows-page .wf-inventory-summary > div + div,
    .tacet-workflows-page .wf-app-grid article + article,
    .tacet-workflows-page .wf-app-grid article:nth-child(3) {
      border-top: 1px solid var(--wf-ui-rule);
      border-left: 0;
    }

    .tacet-workflows-page .wf-product {
      margin-inline: -0.15rem;
      border-radius: var(--tacet-radius-xl);
    }

    .tacet-workflows-page .wf-product__titlebar {
      grid-template-columns: minmax(0, 1fr) auto;
    }

    .tacet-workflows-page .wf-product__scene-tabs {
      grid-column: 1 / -1;
      grid-row: 2;
      width: 100%;
    }

    .tacet-workflows-page .wf-product__play {
      grid-column: 2;
      grid-row: 1;
    }

    .tacet-workflows-page .wf-scene__header {
      align-items: flex-start;
      flex-direction: column;
    }

    .tacet-workflows-page .wf-scene__header-state {
      width: 100%;
    }

    .tacet-workflows-page .wf-scene__header-state button {
      margin-left: auto;
    }

    .tacet-workflows-page .wf-canvas {
      padding: 0.75rem;
    }

    .tacet-workflows-page .wf-node-flow {
      grid-template-columns: 1fr;
      gap: 0.75rem;
      margin-top: 1.5rem;
    }

    .tacet-workflows-page .wf-node {
      min-height: 7rem;
    }

    .tacet-workflows-page .wf-node:not(:last-child)::after {
      display: none;
    }

    .tacet-workflows-page .wf-record-surface,
    .tacet-workflows-page .wf-record-scene {
      min-height: 35rem;
    }

    .tacet-workflows-page :is(.wf-record-table__head, .wf-record-table__row) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tacet-workflows-page .wf-record-table__head span:nth-child(n + 3),
    .tacet-workflows-page .wf-record-table__row strong:nth-child(n + 3) {
      display: none;
    }

    .tacet-workflows-page .wf-record-review {
      grid-template-columns: auto minmax(0, 1fr);
    }

    .tacet-workflows-page .wf-record-review button {
      grid-column: 1 / -1;
      width: 100%;
    }

    .tacet-workflows-page .wf-plugin-grid > li,
    .tacet-workflows-page .wf-plugin-grid > li:nth-child(2n + 1) {
      border-right: 0;
    }

    .tacet-workflows-page .wf-section-head h2,
    .tacet-workflows-page .wf-final h2 {
      font-size: clamp(2.5rem, 12vw, 4rem);
    }

    .tacet-workflows-page .wf-control-grid > article {
      min-height: 20rem;
    }
  }

  /* Current ERP.AI WorkflowEditor surface. Marketing controls stay outside this frame. */
  .tacet-workflows-page .wf-demo-switcher {
    display: flex;
    min-height: 3.5rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--wf-ui-rule);
    background: var(--background);
  }

  .tacet-workflows-page .wf-demo-switcher__tabs {
    display: flex;
    min-width: 0;
    gap: 0.25rem;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .tacet-workflows-page .wf-demo-switcher__tabs::-webkit-scrollbar {
    display: none;
  }

  .tacet-workflows-page .wf-demo-switcher__tab,
  .tacet-workflows-page .wf-demo-switcher__play {
    flex: 0 0 auto;
    min-height: 2rem;
    padding-inline: 0.75rem;
    border-radius: 0.5rem;
    background: transparent;
    color: hsl(240deg 3.8% 46.1%);
    font-size: 0.875rem;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
  }

  .tacet-workflows-page .wf-demo-switcher__tab[aria-selected='true'] {
    background: hsl(240deg 4.8% 95.9%);
    color: hsl(240deg 10% 3.9%);
  }

  .tacet-workflows-page .wf-demo-switcher__play {
    flex: none;
    border: 1px solid hsl(40deg 4% 90%);
    background: hsl(40deg 2% 99.5%);
    color: hsl(240deg 10% 3.9%);
  }

  .tacet-workflows-page .wf-connector-marquee {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: clamp(2.25rem, 5vw, 4.5rem);
    overflow: hidden;
    border-block: 1px solid var(--wf-ui-rule);
  }

  .tacet-workflows-page .wf-connector-marquee__label {
    margin: 0;
    padding: 0.9rem 0.45rem 0;
    color: var(--foreground);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.2;
  }

  .tacet-workflows-page .wf-connector-marquee__track {
    display: flex;
    width: max-content;
    animation: wf-connector-roll 78s linear infinite;
  }

  .tacet-workflows-page .wf-connector-marquee__window {
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  }

  .tacet-workflows-page
    .wf-connector-marquee:is(:hover, :focus-within)
    .wf-connector-marquee__track {
    animation-play-state: paused;
  }

  .tacet-workflows-page .wf-connector-marquee ul {
    display: flex;
    flex: none;
    gap: 0.9rem;
    margin: 0;
    padding: 1.15rem 0.45rem;
    list-style: none;
  }

  .tacet-workflows-page .wf-connector-marquee li {
    flex: none;
  }

  .tacet-workflows-page .wf-connector-marquee li > span {
    display: inline-grid;
    width: 3.75rem;
    height: 3.75rem;
    place-items: center;
    border: 1px solid var(--wf-ui-rule);
    border-radius: var(--tacet-radius-lg);
    background: color-mix(in oklch, var(--background), transparent 4%);
    outline: none;
    transition:
      border-color 160ms ease,
      background 160ms ease,
      transform 160ms ease;
  }

  .tacet-workflows-page .wf-connector-marquee svg {
    width: 2rem;
    height: 2rem;
    filter: grayscale(1);
    opacity: 0.48;
    transition:
      filter 160ms ease,
      opacity 160ms ease,
      transform 160ms ease;
  }

  .tacet-workflows-page .wf-connector-marquee li > span:is(:hover, :focus-visible) {
    border-color: var(--foreground);
    background: var(--background);
    transform: translateY(-0.125rem);
  }

  .tacet-workflows-page .wf-connector-marquee li > span:is(:hover, :focus-visible) svg {
    filter: none;
    opacity: 1;
    transform: scale(1.08);
  }

  @keyframes wf-connector-roll {
    to {
      transform: translateX(-50%);
    }
  }

  .tacet-workflows-page .erp-workflow-frame {
    --erp-canvas: hsl(40deg 3% 98%);
    --erp-card: hsl(40deg 2% 99.5%);
    --erp-muted: hsl(240deg 4.8% 95.9%);
    --erp-muted-fg: hsl(240deg 3.8% 46.1%);
    --erp-border: hsl(40deg 5% 80%);
    --erp-border-subtle: hsl(40deg 4% 90%);
    --erp-fg: hsl(240deg 10% 3.9%);
    --erp-indigo: hsl(240deg 5% 18%);
    --erp-success: hsl(240deg 3% 42%);

    color: var(--erp-fg);
    font-family:
      Inter,
      ui-sans-serif,
      system-ui,
      -apple-system,
      BlinkMacSystemFont,
      'Segoe UI',
      sans-serif;
  }

  .tacet-workflows-page .erp-workflow-breadcrumb {
    display: flex;
    min-height: 2.5rem;
    align-items: center;
    gap: 0.5rem;
    padding-inline: 0.85rem;
    border-bottom: 1px solid var(--erp-border-subtle);
    background: var(--erp-card);
    color: var(--erp-muted-fg);
    font-size: 0.6875rem;
    line-height: 1;
  }

  .tacet-workflows-page .erp-workflow-breadcrumb strong {
    max-width: 24rem;
    overflow: hidden;
    color: var(--erp-fg);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tacet-workflows-page .erp-workflow-viewport {
    position: relative;
    width: 100%;
    height: 40rem;
    overflow-x: auto;
    overflow-y: hidden;
    background: var(--erp-canvas);
    overscroll-behavior-x: contain;
    scrollbar-color: var(--erp-border) transparent;
    scrollbar-width: thin;
  }

  .tacet-workflows-page .erp-workflow-viewport .wf-scene {
    width: max(100%, 74rem);
    min-width: 74rem;
    height: 40rem;
    min-height: 40rem;
    background: var(--erp-canvas);
  }

  .tacet-workflows-page .erp-workflow-canvas {
    position: relative;
    width: max(100%, 74rem);
    height: 40rem;
    overflow: hidden;
    background-color: var(--erp-canvas);
    background-image: radial-gradient(circle, hsl(40deg 5% 80% / 0.8) 1px, transparent 1px);
    background-position: 0 0;
    background-size: 28px 28px;
  }

  .tacet-workflows-page .erp-workflow-graph {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 50%;
    width: 74rem;
    height: 40rem;
    transform: translateX(-50%) scale(var(--wf-zoom, 1));
    transform-origin: center center;
    transition: transform 180ms ease;
  }

  .tacet-workflows-page .erp-canvas-note {
    position: absolute;
    z-index: 12;
    width: 15rem;
    min-width: 11rem;
    min-height: 9rem;
    overflow: auto;
    resize: both;
    border: 1px solid var(--erp-border);
    border-radius: 0.625rem;
    background: hsl(40deg 5% 96%);
    box-shadow: 0 8px 24px hsl(240deg 10% 3.9% / 0.14);
    color: var(--erp-fg);
  }

  .tacet-workflows-page .erp-canvas-note.is-dragging {
    box-shadow: 0 14px 32px hsl(240deg 10% 3.9% / 0.2);
  }

  .tacet-workflows-page .erp-canvas-note > header {
    display: flex;
    min-height: 2.25rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.45rem 0.4rem 0.7rem;
    border-bottom: 1px solid var(--erp-border-subtle);
    cursor: grab;
    touch-action: none;
    user-select: none;
  }

  .tacet-workflows-page .erp-canvas-note.is-dragging > header {
    cursor: grabbing;
  }

  .tacet-workflows-page .erp-canvas-note > header strong {
    font-size: 0.6875rem;
    font-weight: 650;
  }

  .tacet-workflows-page .erp-canvas-note > header button {
    display: inline-grid;
    width: 1.5rem;
    height: 1.5rem;
    place-items: center;
    border-radius: 0.35rem;
    background: transparent;
    color: var(--erp-muted-fg);
    font-size: 1.1rem;
    line-height: 1;
  }

  .tacet-workflows-page .erp-canvas-note > header button:hover {
    background: var(--erp-muted);
    color: var(--erp-fg);
  }

  .tacet-workflows-page .erp-canvas-note textarea {
    width: 100%;
    min-height: 6.5rem;
    box-sizing: border-box;
    padding: 0.7rem;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--erp-fg);
    font: inherit;
    font-size: 0.75rem;
    line-height: 1.5;
    resize: none;
  }

  .tacet-workflows-page .wf-ui-icon {
    display: block;
    width: 1rem;
    height: 1rem;
    flex: none;
  }

  .tacet-workflows-page .erp-workflow-header {
    position: absolute;
    z-index: 20;
    top: 0.75rem;
    right: 0.75rem;
    left: 0.75rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    pointer-events: none;
  }

  .tacet-workflows-page .erp-workflow-header__left,
  .tacet-workflows-page .erp-workflow-header__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    pointer-events: auto;
  }

  .tacet-workflows-page .erp-workflow-header__actions {
    justify-self: end;
  }

  .tacet-workflows-page .erp-icon-button,
  .tacet-workflows-page .erp-header-action {
    display: inline-flex;
    min-width: 2rem;
    height: 2rem;
    min-height: 2rem;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding-inline: 0.625rem;
    border: 1px solid hsl(40deg 4% 90% / 0.5);
    border-radius: 0.5rem;
    background: hsl(40deg 2% 99.5% / 0.9);
    color: var(--erp-fg);
    box-shadow: 0 1px 2px hsl(240deg 10% 3.9% / 0.06);
    font-size: 0.75rem;
    font-weight: 560;
    line-height: 1;
    backdrop-filter: blur(12px);
  }

  .tacet-workflows-page .erp-icon-button--round {
    width: 2rem;
    padding: 0;
    border-radius: 999px;
  }

  .tacet-workflows-page .erp-workflow-header__name {
    display: flex;
    height: 2rem;
    min-width: 0;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.625rem;
    border: 1px solid hsl(40deg 4% 90% / 0.5);
    border-radius: 0.5rem;
    background: hsl(40deg 2% 99.5% / 0.9);
    box-shadow: 0 1px 2px hsl(240deg 10% 3.9% / 0.06);
    backdrop-filter: blur(12px);
  }

  .tacet-workflows-page .erp-workflow-header__name strong {
    max-width: 19rem;
    overflow: hidden;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tacet-workflows-page .erp-workflow-header__name span {
    padding: 0.2rem 0.375rem;
    border-radius: 0.3rem;
    background: var(--erp-muted);
    color: var(--erp-muted-fg);
    font-size: 0.625rem;
    font-weight: 650;
    line-height: 1;
  }

  .tacet-workflows-page .erp-workflow-header__saved {
    justify-self: center;
    color: var(--erp-muted-fg);
    font-size: 0.75rem;
    line-height: 1;
    pointer-events: none;
  }

  .tacet-workflows-page .erp-header-action--active .erp-status-dot {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 999px;
    background: var(--erp-success);
  }

  .tacet-workflows-page .erp-header-action--save {
    border-color: var(--erp-fg);
    background: var(--erp-fg);
    color: var(--erp-card);
  }

  .tacet-workflows-page .erp-workflow-edges {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 40rem;
    overflow: visible;
    pointer-events: none;
  }

  .tacet-workflows-page .erp-workflow-edges path {
    fill: none;
    stroke: hsl(240deg 4% 62%);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 2px 4px hsl(0deg 0% 0% / 0.1));
    opacity: 0.68;
    transition: opacity 180ms ease;
  }

  .tacet-workflows-page .erp-workflow-edges g.is-active path,
  .tacet-workflows-page .erp-workflow-edges g.is-complete path {
    opacity: 1;
  }

  .tacet-workflows-page .erp-workflow-edges g.is-active path {
    stroke: var(--erp-fg);
    stroke-dasharray: 8 9;
    animation: wf-edge-flow 1.4s linear infinite;
  }

  .tacet-workflows-page .erp-workflow-edges g.is-complete path {
    stroke: hsl(240deg 4% 35% / 0.78);
  }

  .tacet-workflows-page .erp-workflow-edges g[hidden] {
    display: none;
  }

  .tacet-workflows-page .erp-node-list {
    position: absolute;
    z-index: 4;
    inset: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .tacet-workflows-page .erp-node {
    position: absolute;
    width: 260px;
    min-height: 8.5rem;
    box-sizing: border-box;
    border: 1px solid var(--erp-border);
    border-radius: 0.75rem;
    background: var(--erp-card);
    box-shadow: 0 1px 2px hsl(240deg 10% 3.9% / 0.05);
    color: var(--erp-fg);
    cursor: pointer;
    font-size: 0.875rem;
    transition:
      border-color 180ms ease,
      box-shadow 180ms ease;
  }

  .tacet-workflows-page .erp-node:hover {
    box-shadow: 0 4px 12px hsl(240deg 10% 3.9% / 0.1);
  }

  .tacet-workflows-page .erp-node:focus-visible,
  .tacet-workflows-page .erp-node.is-selected {
    border-color: var(--erp-indigo);
    outline: none;
    box-shadow:
      0 0 0 2px hsl(240deg 5% 18% / 0.14),
      0 4px 12px hsl(240deg 10% 3.9% / 0.09);
  }

  .tacet-workflows-page .erp-node.is-running {
    border-color: var(--erp-indigo);
    box-shadow:
      0 0 0 2px hsl(240deg 5% 18% / 0.14),
      0 4px 12px hsl(240deg 10% 3.9% / 0.09);
  }

  .tacet-workflows-page .erp-node.is-complete {
    border-color: hsl(240deg 3% 42% / 0.52);
  }

  .tacet-workflows-page .erp-node__trigger-head {
    display: flex;
    height: 1.75rem;
    align-items: center;
    justify-content: space-between;
    padding-inline: 0.75rem 0.375rem;
    border-bottom: 1px solid var(--erp-border-subtle);
    border-radius: 0.75rem 0.75rem 0 0;
    background: var(--erp-muted);
    color: var(--erp-fg);
    font-size: 0.625rem;
    font-weight: 650;
    letter-spacing: 0;
    line-height: 1;
    text-transform: none;
  }

  .tacet-workflows-page .erp-node__trigger-actions {
    display: flex;
    align-items: center;
    gap: 0.125rem;
  }

  .tacet-workflows-page .erp-node__trigger-actions button,
  .tacet-workflows-page .erp-node__menu {
    display: inline-grid;
    width: 1.5rem;
    height: 1.5rem;
    min-width: 1.5rem;
    min-height: 1.5rem;
    place-items: center;
    padding: 0;
    border-radius: 0.375rem;
    background: transparent;
    color: var(--erp-muted-fg);
  }

  .tacet-workflows-page .erp-node__trigger-actions button:first-child {
    background: var(--erp-fg);
    color: var(--erp-card);
  }

  .tacet-workflows-page .erp-node__trigger-actions .wf-ui-icon,
  .tacet-workflows-page .erp-node__menu .wf-ui-icon {
    width: 0.75rem;
    height: 0.75rem;
  }

  .tacet-workflows-page .erp-node__main {
    display: grid;
    min-width: 0;
    grid-template-columns: 1.75rem minmax(0, 1fr) 1.5rem;
    gap: 0.5rem;
    align-items: center;
    padding: 0.625rem 0.75rem 0.375rem;
  }

  .tacet-workflows-page .erp-node--trigger .erp-node__main {
    grid-template-columns: 2rem minmax(0, 1fr) 1.5rem;
    padding-top: 0.625rem;
  }

  .tacet-workflows-page .erp-node__icon {
    display: inline-grid;
    width: 1.75rem;
    height: 1.75rem;
    place-items: center;
    border-radius: 0.375rem;
    background: var(--erp-muted);
    color: var(--erp-muted-fg);
  }

  .tacet-workflows-page .erp-node--trigger .erp-node__icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background: var(--erp-muted);
    color: var(--erp-fg);
  }

  .tacet-workflows-page .erp-node__icon--approval {
    background: var(--erp-muted);
    color: var(--erp-fg);
  }

  .tacet-workflows-page .erp-node__icon--action {
    background: var(--erp-muted);
    color: var(--erp-fg);
  }

  .tacet-workflows-page .erp-node__icon .wf-ui-icon {
    width: 0.875rem;
    height: 0.875rem;
  }

  .tacet-workflows-page .erp-node__title {
    display: grid;
    min-width: 0;
    gap: 0.125rem;
  }

  .tacet-workflows-page .erp-node__title strong {
    overflow: hidden;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tacet-workflows-page .erp-node__title small {
    color: var(--erp-muted-fg);
    font-size: 0.6875rem;
    line-height: 1.2;
  }

  .tacet-workflows-page .erp-node__context {
    margin: 0 0.75rem 0.375rem;
    overflow: hidden;
    padding: 0.375rem 0.5rem;
    border-radius: 0.375rem;
    background: hsl(240deg 4.8% 95.9% / 0.72);
    color: var(--erp-muted-fg);
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 0.625rem;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tacet-workflows-page .erp-node__footer {
    display: flex;
    min-height: 1.75rem;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.125rem 0.75rem 0.625rem;
    color: var(--erp-muted-fg);
    font-size: 0.625rem;
    line-height: 1;
  }

  .tacet-workflows-page .erp-node__activity {
    display: grid;
    max-height: 0;
    gap: 0.375rem;
    margin: 0 0.75rem;
    overflow: hidden;
    opacity: 0;
    transition:
      max-height 220ms ease,
      margin 220ms ease,
      opacity 160ms ease;
  }

  .tacet-workflows-page .erp-node.is-running .erp-node__activity,
  .tacet-workflows-page .erp-node.is-complete .erp-node__activity {
    max-height: 4.75rem;
    margin-block: 0.125rem 0.5rem;
    opacity: 1;
  }

  .tacet-workflows-page .erp-node__activity strong {
    overflow: hidden;
    color: var(--erp-fg);
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 0.625rem;
    font-weight: 500;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tacet-workflows-page .erp-node__activity > span {
    display: block;
    height: 2px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--erp-muted);
  }

  .tacet-workflows-page .erp-node__activity > span i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--erp-success);
  }

  .tacet-workflows-page .erp-node.is-running .erp-node__activity > span i {
    animation: wf-node-progress 2.3s ease-in-out infinite;
  }

  .tacet-workflows-page .erp-node.is-complete .erp-node__activity > span i {
    width: 100%;
  }

  .tacet-workflows-page .erp-node__activity small {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    color: var(--erp-muted-fg);
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 0.5625rem;
    line-height: 1;
  }

  .tacet-workflows-page .erp-node__activity b,
  .tacet-workflows-page .erp-node__activity em {
    font: inherit;
    font-style: normal;
  }

  .tacet-workflows-page .erp-node__configured {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
  }

  .tacet-workflows-page .erp-node__configured i {
    display: block;
    width: 0.3125rem;
    height: 0.3125rem;
    border-radius: 999px;
    background: var(--erp-success);
  }

  .tacet-workflows-page .erp-node__handle {
    position: absolute;
    z-index: 6;
    top: 4.375rem;
    width: 0.5rem;
    height: 1rem;
    border: 2px solid var(--erp-canvas);
    border-radius: 0.125rem;
    background: var(--erp-muted-fg);
    box-shadow: 0 1px 2px hsl(240deg 10% 3.9% / 0.16);
    transform: translateY(-50%);
  }

  .tacet-workflows-page .erp-node__handle--target {
    left: -0.3125rem;
  }

  .tacet-workflows-page .erp-node__handle--source {
    right: -0.3125rem;
  }

  .tacet-workflows-page .erp-node__exec-badge {
    position: absolute;
    z-index: 7;
    top: -0.625rem;
    right: 0.625rem;
    padding: 0.25rem 0.4rem;
    border: 1px solid hsl(40deg 4% 90%);
    border-radius: 999px;
    background: var(--erp-card);
    color: var(--erp-muted-fg);
    box-shadow: 0 1px 3px hsl(240deg 10% 3.9% / 0.1);
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1;
  }

  .tacet-workflows-page .erp-node--trigger .erp-node__exec-badge {
    right: 0.625rem;
  }

  .tacet-workflows-page .erp-node-panel[hidden],
  .tacet-workflows-page .erp-node-panel__view[hidden] {
    display: none;
  }

  .tacet-workflows-page .erp-node-panel {
    position: absolute;
    z-index: 40;
    top: 3.5rem;
    right: 0.5rem;
    bottom: 0.5rem;
    display: flex;
    width: 30rem;
    flex-direction: column;
    overflow: hidden;
    border: 2px solid hsl(40deg 4% 90% / 0.5);
    border-radius: 0.75rem;
    background: var(--erp-card);
    box-shadow: 0 18px 45px hsl(240deg 10% 3.9% / 0.16);
    animation: wf-node-panel-in 180ms ease-out both;
  }

  .tacet-workflows-page .erp-node-panel.is-expanded {
    top: 1rem;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    width: auto;
  }

  .tacet-workflows-page .erp-node-panel__header {
    display: grid;
    flex: none;
    grid-template-columns: 2.5rem minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.5rem 1rem 0;
  }

  .tacet-workflows-page .erp-node-panel__icon {
    display: inline-grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    border: 1px solid hsl(40deg 4% 90% / 0.3);
    border-radius: 0.75rem;
    background: var(--erp-muted);
    color: var(--erp-muted-fg);
  }

  .tacet-workflows-page .erp-node-panel__icon .wf-ui-icon {
    width: 1.5rem;
    height: 1.5rem;
  }

  .tacet-workflows-page .erp-node-panel__title {
    display: grid;
    min-width: 0;
    gap: 0.15rem;
  }

  .tacet-workflows-page .erp-node-panel__title strong {
    overflow: hidden;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tacet-workflows-page .erp-node-panel__title small {
    color: var(--erp-muted-fg);
    font-size: 0.6875rem;
    line-height: 1.2;
  }

  .tacet-workflows-page .erp-node-panel__actions {
    display: flex;
    align-items: center;
    gap: 0.125rem;
  }

  .tacet-workflows-page .erp-node-panel__actions button {
    display: inline-grid;
    width: 1.75rem;
    height: 1.75rem;
    min-width: 1.75rem;
    min-height: 1.75rem;
    place-items: center;
    padding: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--erp-muted-fg);
  }

  .tacet-workflows-page .erp-node-panel__actions button:hover {
    background: var(--erp-muted);
    color: var(--erp-fg);
  }

  .tacet-workflows-page .erp-node-panel__actions .wf-ui-icon {
    width: 0.875rem;
    height: 0.875rem;
  }

  .tacet-workflows-page .erp-node-panel__actions i {
    width: 1px;
    height: 1rem;
    margin-inline: 0.25rem;
    background: var(--erp-border-subtle);
  }

  .tacet-workflows-page .erp-node-panel__description {
    margin: 0.25rem 1rem 0;
    color: hsl(240deg 3.8% 46.1% / 0.72);
    font-size: 0.75rem;
    line-height: 1.35;
  }

  .tacet-workflows-page .erp-node-panel__tabs {
    display: flex;
    flex: none;
    gap: 1.35rem;
    margin-top: 0.75rem;
    padding-inline: 1rem;
    overflow-x: auto;
    border-bottom: 1px solid var(--erp-border-subtle);
    scrollbar-width: none;
  }

  .tacet-workflows-page .erp-node-panel__tabs::-webkit-scrollbar {
    display: none;
  }

  .tacet-workflows-page .erp-node-panel__tabs button {
    position: relative;
    width: auto;
    min-width: 0;
    min-height: 2.25rem;
    padding: 0 0.125rem 0.625rem;
    background: transparent;
    color: hsl(240deg 3.8% 46.1% / 0.6);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
  }

  .tacet-workflows-page .erp-node-panel__tabs button[aria-pressed='true'] {
    color: var(--erp-fg);
  }

  .tacet-workflows-page .erp-node-panel__tabs button[aria-pressed='true']::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    border-radius: 999px;
    background: var(--erp-fg);
    content: '';
  }

  .tacet-workflows-page .erp-node-panel__body {
    min-height: 0;
    flex: 1;
    overflow-y: auto;
    background: var(--erp-card);
  }

  .tacet-workflows-page .erp-node-panel__view {
    display: grid;
    gap: 0.875rem;
    padding: 1rem;
  }

  .tacet-workflows-page .erp-node-panel__view > p {
    margin: 0;
    color: var(--erp-muted-fg);
    font-size: 0.75rem;
    line-height: 1.45;
  }

  .tacet-workflows-page .erp-node-panel__section-head {
    display: flex;
    min-height: 1.75rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .tacet-workflows-page .erp-node-panel__section-head strong {
    font-size: 0.6875rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .tacet-workflows-page .erp-node-panel__section-head span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.45rem;
    border-radius: 999px;
    background: var(--erp-muted);
    color: var(--erp-muted-fg);
    font-size: 0.625rem;
    font-weight: 600;
  }

  .tacet-workflows-page .erp-node-panel__fields {
    display: grid;
    gap: 0.625rem;
    margin: 0;
  }

  .tacet-workflows-page .erp-node-panel__fields > div {
    display: grid;
    gap: 0.375rem;
  }

  .tacet-workflows-page .erp-node-panel__fields dt {
    color: var(--erp-muted-fg);
    font-size: 0.6875rem;
    line-height: 1;
  }

  .tacet-workflows-page .erp-node-panel__fields dd {
    min-height: 2.25rem;
    margin: 0;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--erp-border-subtle);
    border-radius: 0.5rem;
    background: hsl(40deg 3% 98%);
    color: var(--erp-fg);
    font-size: 0.75rem;
    line-height: 1.35;
  }

  .tacet-workflows-page .erp-node-panel__fields dd:has(:is(input, textarea)) {
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .tacet-workflows-page .erp-node-panel__fields :is(input, textarea) {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 0.625rem 0.7rem;
    border: 1px solid var(--erp-border);
    border-radius: 0.5rem;
    outline: none;
    background: var(--erp-card);
    color: var(--erp-fg);
    font: inherit;
    font-size: 0.75rem;
    line-height: 1.4;
    resize: vertical;
  }

  .tacet-workflows-page .erp-node-panel__fields :is(input, textarea):focus {
    border-color: var(--erp-indigo);
    box-shadow: 0 0 0 2px hsl(240deg 5% 18% / 0.12);
  }

  .tacet-workflows-page .erp-node-panel__save {
    min-height: 2.5rem;
    margin-top: 1rem;
    padding-inline: 0.9rem;
    border-radius: 0.5rem;
    background: var(--erp-fg);
    color: var(--erp-card);
    font-size: 0.75rem;
    font-weight: 650;
  }

  .tacet-workflows-page .erp-node-panel__save.is-saved {
    background: var(--erp-success);
  }

  .tacet-workflows-page .erp-node-panel__data-row {
    display: grid;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--erp-border-subtle);
    border-radius: 0.5rem;
    background: hsl(40deg 3% 98%);
  }

  .tacet-workflows-page .erp-node-panel__data-row > span {
    color: var(--erp-muted-fg);
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 0.625rem;
  }

  .tacet-workflows-page .erp-node-panel__data-row code {
    color: var(--erp-fg);
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 0.6875rem;
    line-height: 1.5;
    white-space: normal;
  }

  .tacet-workflows-page .erp-node-panel__data-row--output {
    border-color: var(--erp-border);
    background: var(--erp-muted);
  }

  .tacet-workflows-page .erp-node-panel__history {
    display: grid;
    grid-template-columns: 0.5rem minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
    padding-block: 0.5rem;
  }

  .tacet-workflows-page .erp-node-panel__history > span {
    width: 0.5rem;
    height: 0.5rem;
    margin-top: 0.2rem;
    border-radius: 999px;
    background: var(--erp-success);
  }

  .tacet-workflows-page .erp-node-panel__history p {
    display: grid;
    gap: 0.25rem;
    margin: 0;
    color: var(--erp-muted-fg);
    font-size: 0.6875rem;
    line-height: 1.4;
  }

  .tacet-workflows-page .erp-node-panel__history strong {
    color: var(--erp-fg);
    font-size: 0.75rem;
  }

  .tacet-workflows-page .erp-node.is-running .erp-node__exec-badge {
    border-color: var(--erp-border);
    color: var(--erp-fg);
  }

  .tacet-workflows-page .erp-node.is-complete .erp-node__exec-badge {
    border-color: var(--erp-border);
    color: var(--erp-muted-fg);
  }

  .tacet-workflows-page .erp-add-node-rail {
    position: absolute;
    z-index: 20;
    top: 3.5rem;
    right: 0.75rem;
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
    min-height: 2.25rem;
    place-items: center;
    padding: 0;
    border: 1px solid var(--erp-fg);
    border-radius: 0.5rem;
    background: var(--erp-fg);
    color: var(--erp-card);
    box-shadow: 0 2px 5px hsl(240deg 10% 3.9% / 0.14);
  }

  .tacet-workflows-page .erp-node-picker[hidden] {
    display: none;
  }

  .tacet-workflows-page .erp-node-picker {
    position: absolute;
    z-index: 45;
    top: 3.75rem;
    right: 4.25rem;
    width: min(22rem, calc(100% - 5rem));
    overflow: hidden;
    border: 1px solid var(--erp-border);
    border-radius: 0.75rem;
    background: var(--erp-card);
    box-shadow: 0 18px 45px hsl(240deg 10% 3.9% / 0.18);
  }

  .tacet-workflows-page .erp-node-picker > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 0.9rem;
    border-bottom: 1px solid var(--erp-border-subtle);
  }

  .tacet-workflows-page .erp-node-picker > header strong {
    font-size: 0.875rem;
    font-weight: 650;
  }

  .tacet-workflows-page .erp-node-picker > header button {
    display: inline-grid;
    width: 1.75rem;
    height: 1.75rem;
    place-items: center;
    border-radius: 0.375rem;
    background: transparent;
    color: var(--erp-muted-fg);
  }

  .tacet-workflows-page .erp-node-picker > p {
    margin: 0;
    padding: 0.75rem 0.9rem 0.5rem;
    color: var(--erp-muted-fg);
    font-size: 0.6875rem;
    line-height: 1.4;
  }

  .tacet-workflows-page .erp-node-picker > div {
    display: grid;
    gap: 0.25rem;
    padding: 0.375rem 0.5rem 0.5rem;
  }

  .tacet-workflows-page .erp-node-picker > div > button {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.65rem;
    align-items: center;
    padding: 0.65rem;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--erp-fg);
    text-align: left;
  }

  .tacet-workflows-page .erp-node-picker > div > button:hover,
  .tacet-workflows-page .erp-node-picker > div > button:focus-visible {
    outline: none;
    background: var(--erp-muted);
  }

  .tacet-workflows-page .erp-node-picker > div > button > span:last-child {
    display: grid;
    gap: 0.15rem;
  }

  .tacet-workflows-page .erp-node-picker > div > button strong {
    font-size: 0.75rem;
    font-weight: 650;
  }

  .tacet-workflows-page .erp-node-picker > div > button small {
    color: var(--erp-muted-fg);
    font-size: 0.625rem;
    line-height: 1.35;
  }

  .tacet-workflows-page .erp-canvas-controls,
  .tacet-workflows-page .erp-bottom-menu {
    position: absolute;
    z-index: 20;
    bottom: 0.75rem;
    display: flex;
    align-items: center;
    padding: 0.25rem;
    border: 1px solid hsl(40deg 4% 90% / 0.5);
    border-radius: 0.5rem;
    background: hsl(40deg 2% 99.5% / 0.95);
    box-shadow: 0 1px 3px hsl(240deg 10% 3.9% / 0.1);
    backdrop-filter: blur(12px);
  }

  .tacet-workflows-page .erp-canvas-controls {
    left: 0.75rem;
  }

  .tacet-workflows-page .erp-bottom-menu {
    left: 50%;
    gap: 0.125rem;
    transform: translateX(-50%);
  }

  .tacet-workflows-page .erp-workspace-panel[hidden],
  .tacet-workflows-page .erp-workspace-panel__view[hidden] {
    display: none;
  }

  .tacet-workflows-page .erp-workspace-panel {
    position: absolute;
    z-index: 42;
    right: 0.75rem;
    bottom: 3.75rem;
    width: min(23rem, calc(100% - 1.5rem));
    max-height: 31rem;
    overflow: auto;
    border: 1px solid var(--erp-border);
    border-radius: 0.75rem;
    background: var(--erp-card);
    box-shadow: 0 18px 45px hsl(240deg 10% 3.9% / 0.16);
    animation: wf-node-panel-in 180ms ease-out both;
  }

  .tacet-workflows-page .erp-workspace-panel > header {
    position: sticky;
    z-index: 1;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 0.9rem;
    border-bottom: 1px solid var(--erp-border-subtle);
    background: var(--erp-card);
  }

  .tacet-workflows-page .erp-workspace-panel > header > span {
    display: grid;
    gap: 0.1rem;
  }

  .tacet-workflows-page .erp-workspace-panel > header small,
  .tacet-workflows-page .erp-workspace-panel__run-summary span,
  .tacet-workflows-page .erp-workspace-panel__run-summary small,
  .tacet-workflows-page .erp-workspace-panel__timeline small,
  .tacet-workflows-page .erp-workspace-panel__setting small {
    color: var(--erp-muted-fg);
    font-size: 0.625rem;
    line-height: 1.35;
  }

  .tacet-workflows-page .erp-workspace-panel > header strong {
    font-size: 0.875rem;
    font-weight: 650;
  }

  .tacet-workflows-page .erp-workspace-panel > header button {
    display: inline-grid;
    width: 1.75rem;
    height: 1.75rem;
    place-items: center;
    border-radius: 0.375rem;
    background: transparent;
    color: var(--erp-muted-fg);
  }

  .tacet-workflows-page .erp-workspace-panel__view {
    padding: 0.9rem;
  }

  .tacet-workflows-page .erp-workspace-panel__run-summary {
    display: grid;
    gap: 0.3rem;
    padding: 0.8rem;
    border: 1px solid var(--erp-border-subtle);
    border-radius: 0.5rem;
    background: var(--erp-muted);
  }

  .tacet-workflows-page .erp-workspace-panel__run-summary strong {
    font-size: 1rem;
    font-weight: 650;
  }

  .tacet-workflows-page .erp-workspace-panel__timeline {
    display: grid;
    gap: 0;
    margin: 0.75rem 0;
    padding: 0;
    list-style: none;
  }

  .tacet-workflows-page .erp-workspace-panel__timeline li {
    display: grid;
    grid-template-columns: 0.5rem minmax(0, 1fr);
    gap: 0.65rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--erp-border-subtle);
  }

  .tacet-workflows-page .erp-workspace-panel__timeline i {
    width: 0.45rem;
    height: 0.45rem;
    margin-top: 0.25rem;
    border-radius: 999px;
    background: var(--erp-fg);
  }

  .tacet-workflows-page .erp-workspace-panel__timeline span {
    display: grid;
    gap: 0.15rem;
  }

  .tacet-workflows-page .erp-workspace-panel__timeline strong,
  .tacet-workflows-page .erp-workspace-panel__setting strong {
    font-size: 0.75rem;
    font-weight: 620;
  }

  .tacet-workflows-page .erp-workspace-panel__primary {
    width: 100%;
    min-height: 2.5rem;
    border-radius: 0.5rem;
    background: var(--erp-fg);
    color: var(--erp-card);
    font-size: 0.75rem;
    font-weight: 650;
  }

  .tacet-workflows-page .erp-workspace-panel__setting {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--erp-border-subtle);
  }

  .tacet-workflows-page .erp-workspace-panel__setting > span {
    display: grid;
    gap: 0.15rem;
  }

  .tacet-workflows-page .erp-workspace-panel__setting input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--erp-fg);
  }

  .tacet-workflows-page .erp-workspace-panel__note {
    display: grid;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    color: var(--erp-muted-fg);
    font-size: 0.6875rem;
  }

  .tacet-workflows-page .erp-workspace-panel__note textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.7rem;
    border: 1px solid var(--erp-border);
    border-radius: 0.5rem;
    outline: none;
    background: var(--erp-card);
    color: var(--erp-fg);
    font: inherit;
    line-height: 1.45;
    resize: vertical;
  }

  .tacet-workflows-page .erp-workspace-panel__note textarea:focus {
    border-color: var(--erp-fg);
    box-shadow: 0 0 0 2px hsl(240deg 5% 18% / 0.1);
  }

  .tacet-workflows-page .erp-canvas-controls button,
  .tacet-workflows-page .erp-bottom-menu button {
    display: inline-flex;
    width: auto;
    height: 1.75rem;
    min-width: 1.75rem;
    min-height: 1.75rem;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0 0.4rem;
    border-radius: 0.375rem;
    background: transparent;
    color: var(--erp-muted-fg);
    font-size: 0.6875rem;
    line-height: 1;
  }

  .tacet-workflows-page .erp-canvas-controls button:hover,
  .tacet-workflows-page .erp-bottom-menu button:hover {
    background: var(--erp-muted);
    color: var(--erp-fg);
  }

  .tacet-workflows-page .erp-canvas-controls button:disabled {
    cursor: not-allowed;
    opacity: 0.3;
  }

  .tacet-workflows-page .erp-canvas-controls__zoom {
    min-width: 2.5rem !important;
    font-variant-numeric: tabular-nums;
  }

  .tacet-workflows-page .erp-canvas-controls > span {
    width: 1px;
    height: 1rem;
    margin-inline: 0.125rem;
    background: var(--erp-border-subtle);
  }

  .tacet-workflows-page .erp-canvas-controls .wf-ui-icon,
  .tacet-workflows-page .erp-bottom-menu .wf-ui-icon,
  .tacet-workflows-page .erp-add-node-rail .wf-ui-icon,
  .tacet-workflows-page .erp-header-action .wf-ui-icon {
    width: 0.8125rem;
    height: 0.8125rem;
  }

  @media (max-width: 42rem) {
    .tacet-workflows-page .wf-connector-marquee {
      margin-top: 2rem;
    }

    .tacet-workflows-page .wf-connector-marquee ul {
      gap: 0.65rem;
      padding-block: 0.85rem;
    }

    .tacet-workflows-page .wf-connector-marquee li > span {
      width: 3.25rem;
      height: 3.25rem;
    }

    .tacet-workflows-page .wf-connector-marquee svg {
      width: 1.75rem;
      height: 1.75rem;
    }

    .tacet-workflows-page .wf-demo-switcher {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 0.5rem;
      align-items: center;
    }

    .tacet-workflows-page .wf-demo-switcher__tabs {
      max-width: 100%;
      width: 100%;
      padding-bottom: 0.15rem;
      overscroll-behavior-x: contain;
      scroll-snap-type: x proximity;
    }

    .tacet-workflows-page .wf-demo-switcher__tab {
      scroll-snap-align: start;
    }

    .tacet-workflows-page .wf-demo-switcher__play {
      justify-self: end;
    }

    .tacet-workflows-page .erp-workflow-breadcrumb {
      display: none;
    }

    .tacet-workflows-page .erp-workflow-viewport,
    .tacet-workflows-page .erp-workflow-viewport .wf-scene,
    .tacet-workflows-page .erp-workflow-canvas {
      height: 40rem;
      min-height: 40rem;
    }

    .tacet-workflows-page .erp-workflow-header {
      grid-template-columns: minmax(0, 1fr) auto;
    }

    .tacet-workflows-page .erp-workflow-header__saved {
      display: none;
    }

    .tacet-workflows-page
      .erp-workflow-header__actions
      .erp-header-action:not(.erp-header-action--save) {
      display: none;
    }

    .tacet-workflows-page .erp-workflow-header__name strong {
      max-width: 12rem;
    }

    .tacet-workflows-page .erp-bottom-menu {
      right: 0.75rem;
      left: auto;
      transform: none;
    }

    .tacet-workflows-page .erp-bottom-menu button span {
      display: none;
    }

    .tacet-workflows-page .erp-node-panel {
      right: 0.5rem;
      left: 0.5rem;
      width: auto;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .tacet-workflows-page .wf-connector-marquee__window {
      overflow-x: auto;
      mask-image: none;
    }

    .tacet-workflows-page .wf-connector-marquee__track {
      animation: none !important;
    }

    .tacet-workflows-page .wf-connector-marquee ul[aria-hidden='true'] {
      display: none;
    }

    .tacet-workflows-page *,
    .tacet-workflows-page *::before,
    .tacet-workflows-page *::after {
      animation: none !important;
      scroll-behavior: auto !important;
      transition-duration: 0.01ms !important;
    }
  }

  @keyframes wf-node-panel-in {
    from {
      opacity: 0;
      transform: translateX(0.75rem);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes wf-edge-flow {
    to {
      stroke-dashoffset: -17;
    }
  }

  @keyframes wf-node-progress {
    0% {
      width: 12%;
    }
    70% {
      width: 82%;
    }
    100% {
      width: 94%;
    }
  }
}