:root{--boids-color-separation:var(--color-red);--boids-color-alignment:var(--color-blue);--boids-color-cohesion:var(--color-green);--boids-color-predator:var(--color-red)}layout-main main{display:flex;flex-direction:column;align-items:center;padding:2rem;gap:1.5rem}layout-main #boids-canvas{width:100%;height:100%;border:1px solid var(--draw-color-surface);border-radius:4px;background:var(--background-color-surface);cursor:crosshair}@media(max-width:768px){layout-main main{padding:1rem;gap:1rem}}.boids-legend{display:flex;flex-flow:column nowrap;gap:.5rem}.boids-legend.inline{flex-flow:row wrap;gap:1rem}.boids-legend .legend-item{display:inline-flex;flex-flow:row nowrap;align-items:center;gap:.25rem;font-weight:300;color:var(--text-color-surface)}.boids-legend .swatch{display:inline-block;width:.75rem;height:.75rem;border-radius:50%}.boids-legend .swatch.separation{background-color:var(--boids-color-separation)}.boids-legend .swatch.alignment{background-color:var(--boids-color-alignment)}.boids-legend .swatch.cohesion{background-color:var(--boids-color-cohesion)}.boids-controls .boids-actions{display:flex;flex-flow:row nowrap;justify-content:center;gap:.5rem}.boids-controls .is-start{display:inline-flex}.boids-controls .is-pause{display:none}.boids-controls.is-running .is-start{display:none}.boids-controls.is-running .is-pause{display:inline-flex}.boids-options{display:flex;flex-flow:column nowrap;gap:.75rem}.boids-options .control-group{display:flex;flex-flow:column nowrap;gap:.25rem}.boids-options .control-group label{font-size:.85rem;font-weight:400;color:var(--text-color-surface)}.boids-options .control-group input[type=range]{width:100%;cursor:pointer}.boids-options .control-group.checkbox{flex-flow:row nowrap;align-items:center}.boids-options .control-group.checkbox label{display:flex;flex-flow:row nowrap;align-items:center;gap:.5rem;cursor:pointer}.boids-options .control-group.checkbox input[type=checkbox]{cursor:pointer}