:root{--flowfield-color-particle:var(--draw-color-primary)}.flowfield-controls{display:flex;flex-flow:row nowrap;justify-content:center;gap:.5rem}.flowfield-controls button{border:none;background:0 0;font:inherit;color:inherit;cursor:pointer}.flowfield-controls .is-play{display:block}.flowfield-controls .is-pause{display:none}.flowfield-controls.is-running .is-play{display:none}.flowfield-controls.is-running .is-pause{display:block}.flowfield-options{display:flex;flex-flow:column nowrap;gap:calc(var(--layout-spacing) * .75)}.flowfield-options fieldset{border:none;padding:0;margin:0}.flowfield-options fieldset legend{font-weight:600;margin-bottom:.5rem}.flowfield-options .option{display:flex;flex-flow:column nowrap;margin-bottom:.5rem}.flowfield-options .option label{display:flex;justify-content:space-between;font-size:.875rem;margin-bottom:.25rem}.flowfield-options .option label span{text-align:right;font-family:monospace;color:var(--draw-color-primary)}.flowfield-options .option input[type=range]{width:100%;height:6px;background:var(--draw-color-surface);border-radius:3px;cursor:pointer;accent-color:var(--draw-color-primary)}.flowfield-stats dl{display:grid;grid-template-columns:1fr auto;gap:.5rem 1rem}.flowfield-stats dl dt{color:var(--text-color-secondary);font-size:.875rem}.flowfield-stats dl dd{font-family:monospace;text-align:right;color:var(--text-color-primary)}