.fb-lane{display:grid;gap:.35rem;margin-bottom:.9rem}
.fb-lane > span{color:var(--muted)}
.fb-track{position:relative;height:28px;background:color-mix(in srgb,var(--fg) 5%,transparent);border-radius:6px}
.fb-box{position:absolute;top:0;left:0;width:28px;height:28px;border-radius:6px;background:var(--fg)}
.fb-runner{position:absolute;top:0;left:0;bottom:0;width:calc(100% - 28px);animation:fb-slide 1.6s linear infinite alternate}
.fb-runner .fb-box{background:var(--redline)}
@keyframes fb-slide{from{transform:translateX(0)}to{transform:translateX(100%)}}
.fb-strip{display:grid;gap:.35rem;margin-top:1.1rem}
.fb-strip > span{color:var(--muted)}
.fb-strip canvas{display:block;width:100%;height:64px;border-bottom:1px solid var(--rule)}
.fb-pipe{display:grid;gap:1rem}
.fb-pipe .flow li.fb-skip > span{color:var(--muted);border-style:dashed;text-decoration:line-through;opacity:.6}
.fb-spec{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:84px;padding:.75rem;background:color-mix(in srgb,var(--fg) 4%,transparent)}
.fb-spec .demo-btn{flex:none}
.fb-thing{position:relative;top:0;display:grid;place-items:center;width:72px;height:48px;border-radius:8px;background:var(--bg);border:1px solid var(--rule);color:var(--fg);transition:color .4s,width .4s,top .4s,box-shadow .4s,transform .4s,opacity .4s}
.fb-thing.is-on[data-prop=color]{color:var(--redline)}
.fb-thing.is-on[data-prop=width]{width:132px}
.fb-thing.is-on[data-prop=top]{top:12px}
.fb-thing.is-on[data-prop=box-shadow]{box-shadow:0 10px 28px -6px color-mix(in srgb,var(--fg) 45%,transparent)}
.fb-thing.is-on[data-prop=transform]{transform:translateX(40px) rotate(8deg)}
.fb-thing.is-on[data-prop=opacity]{opacity:.25}
@media (prefers-reduced-motion:reduce){.fb-thing{transition:none}}