batching-dataflow-demo {
  --bdf-bg: var(--pst-color-surface, #fff);
  --bdf-panel: var(--pst-color-background, #f5f7fa);
  --bdf-text: var(--pst-color-text-base, #172033);
  --bdf-muted: #64748b;
  --bdf-border: var(--pst-color-border, #cbd5e1);
  --bdf-primary: #2563eb;
  --bdf-accent: #d97706;
  display: block;
  margin: 1.5rem 0;
  color: var(--bdf-text);
}

@media (prefers-color-scheme: dark) {
  batching-dataflow-demo { --bdf-bg: #191b1f; --bdf-panel: #111318; --bdf-text: #f1f5f9; --bdf-muted: #a7b0bd; --bdf-border: #3c424c; --bdf-primary: #60a5fa; --bdf-accent: #f59e0b; }
}

.bdf-widget, .bdf-widget * { box-sizing: border-box; }
.bdf-widget { padding: .9rem; border: 1px solid var(--bdf-border); border-radius: .7rem; background: var(--bdf-bg); }
.bdf-controls { display: grid; grid-template-columns: 1.35fr repeat(3, .7fr); gap: .55rem; align-items: end; }
.bdf-controls label { display: grid; gap: .25rem; margin: 0; font-size: .78rem; font-weight: 650; }
.bdf-controls select, .bdf-controls input[type="number"] { width: 100%; height: 2rem; padding: .25rem .4rem; border: 1px solid var(--bdf-border); border-radius: .35rem; background: var(--bdf-bg); color: var(--bdf-text); }
.bdf-controls .bdf-check { display: flex; align-items: center; gap: .4rem; min-height: 2rem; font-weight: 500; white-space: nowrap; }
.bdf-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin: .65rem 0; }
.bdf-button { min-height: 2rem; padding: .25rem .55rem; border: 1px solid var(--bdf-border); border-radius: .38rem; background: var(--bdf-bg); color: var(--bdf-text); font-size: .8rem; cursor: pointer; }
.bdf-button--primary { color: white; border-color: #2563eb; background: #2563eb; }
.bdf-button:disabled { cursor: default; opacity: .45; }
.bdf-button:focus-visible, .bdf-controls :focus-visible { outline: 2px solid var(--bdf-primary); outline-offset: 2px; }
.bdf-card { min-width: 0; padding: .65rem; border: 1px solid var(--bdf-border); border-radius: .5rem; background: var(--bdf-panel); }
.bdf-card h3 { margin: 0; font-size: .87rem; }
.bdf-heading { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.bdf-heading span { color: var(--bdf-muted); font-size: .73rem; }
.bdf-batches { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .55rem; }
.bdf-batch { padding: .35rem; border: 1px solid var(--bdf-border); border-radius: .4rem; background: var(--bdf-bg); }
.bdf-batch > span { display: block; margin-bottom: .25rem; color: var(--bdf-muted); font-size: .68rem; }
.bdf-batch > div { display: flex; flex-wrap: wrap; gap: .25rem; }
.bdf-batch.is-current { border-color: var(--bdf-primary); box-shadow: 0 0 0 1px var(--bdf-primary); }
.bdf-batch.is-done { border-color: #16a34a; }
.bdf-dropped { opacity: .55; border-style: dashed; }
.bdf-sample { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: .32rem; background: #dbeafe; color: #1e3a8a; font-size: .72rem; font-weight: 700; }
.bdf-sample.is-active { width: 2rem; height: 2rem; background: var(--bdf-primary); color: white; }
.bdf-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: .7rem; }
.bdf-active { display: grid; align-content: start; gap: .55rem; }
.bdf-stage-visual { min-height: 9rem; padding: .55rem; border-radius: .4rem; background: var(--bdf-bg); }
.bdf-step-strip { display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid var(--bdf-border); }
.bdf-step-strip > div { display: grid; justify-items: center; gap: .15rem; padding: .25rem .1rem .45rem; color: var(--bdf-muted); font-size: .62rem; }
.bdf-step-strip span { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border: 1px solid var(--bdf-border); border-radius: 50%; font-size: .62rem; }
.bdf-step-strip .is-active { color: var(--bdf-primary); font-weight: 700; box-shadow: inset 0 -2px var(--bdf-primary); }
.bdf-step-strip .is-active span { color: white; border-color: var(--bdf-primary); background: var(--bdf-primary); }
.bdf-step-strip .is-done span { color: #166534; border-color: #86efac; background: #dcfce7; }
.bdf-step-content { display: flex; align-items: center; justify-content: center; gap: 1rem; min-height: 5.5rem; padding: .8rem .25rem .2rem; }
.bdf-step-samples, .bdf-values { display: flex; flex-wrap: wrap; justify-content: center; gap: .2rem; }
.bdf-values span { padding: .25rem .35rem; border-radius: .3rem; background: var(--bdf-panel); font: .68rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.bdf-matrix { color: var(--bdf-muted); font-size: .72rem; text-align: center; }
.bdf-formula { color: var(--bdf-muted); font: .72rem ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; }
.bdf-matrix-label { display: block; color: var(--bdf-text); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: .72rem; font-weight: 700; }
.bdf-matrix-shape { display: block; margin-top: .18rem; }
.bdf-result { min-width: 7.8rem; padding: .55rem .65rem; border-left: 3px solid var(--bdf-primary); background: var(--bdf-panel); }
.bdf-result b, .bdf-result span { display: block; }
.bdf-result b { font-size: .72rem; }
.bdf-result span { margin-top: .18rem; color: var(--bdf-muted); font: .68rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.bdf-result--loss { border-color: var(--bdf-accent); }
.bdf-result--update { border-color: #16a34a; }
.bdf-metrics { display: grid; grid-template-columns: 1fr; gap: .3rem; margin: .5rem 0 0; }
.bdf-metrics div { display: flex; justify-content: space-between; gap: .4rem; padding: .28rem .35rem; border-radius: .3rem; background: var(--bdf-bg); }
.bdf-metrics dt { color: var(--bdf-muted); font-size: .67rem; }
.bdf-metrics dd { margin: 0; font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.bdf-error { margin: .35rem 0 0; color: #b45309; font-size: .75rem; }
.bdf-error:empty { display: none; }
.bdf-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 700px) {
  .bdf-controls { grid-template-columns: 1fr 1fr; }
  .bdf-grid { grid-template-columns: 1fr; }
}

@media (max-width: 400px) {
  .bdf-widget { padding: .65rem; }
  .bdf-controls, .bdf-metrics { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) { .bdf-widget * { transition: none !important; } }