:root{--creature-color-speed:var(--color-red);--creature-color-size:var(--color-blue);--creature-color-perception:var(--color-green);--creature-color-food:var(--color-green)}#creature-canvas{width:100%;height:100%;background:var(--background-color-surface)}layout-main .stats{display:flex;justify-content:center;gap:2rem;flex-wrap:wrap}layout-main .stats .stat{display:flex;flex-direction:column;align-items:center;gap:.25rem}layout-main .stats .stat .label{font-size:.75rem;text-transform:uppercase;color:var(--text-color-muted)}layout-main .stats .stat .value{font-size:1.5rem;font-weight:600;font-variant-numeric:tabular-nums}layout-main .legend{display:flex;justify-content:center;gap:1.5rem;flex-wrap:wrap}layout-main .legend .legend-item{display:flex;align-items:center;gap:.5rem;font-size:.875rem}layout-main .legend .legend-item .color{width:12px;height:12px;border-radius:50%}layout-main .legend .legend-item .color.speed{background-color:var(--creature-color-speed)}layout-main .legend .legend-item .color.size{background-color:var(--creature-color-size)}layout-main .legend .legend-item .color.sense{background-color:var(--creature-color-perception)}.creature-controls{display:flex;flex-flow:row nowrap;justify-content:center;gap:.5rem;margin-top:1rem}.creature-controls .is-start{display:block}.creature-controls .is-stop{display:none}.creature-controls.is-running .is-start{display:none}.creature-controls.is-running .is-stop{display:block}.creature-legend{display:flex;flex-flow:column nowrap;gap:.5rem}.creature-legend.inline{flex-flow:row wrap;gap:1rem}.creature-legend .legend-item{display:inline-flex;flex-flow:row nowrap;align-items:center;gap:.25rem;font-weight:300;color:var(--text-color-surface)}.creature-legend .swatch{display:inline-block;width:.75rem;height:.75rem;border-radius:50%}.creature-legend .swatch.speed{background-color:var(--creature-color-speed)}.creature-legend .swatch.size{background-color:var(--creature-color-size)}.creature-legend .swatch.perception{background-color:var(--creature-color-perception)}.creature-rules{display:flex;flex-flow:column nowrap;gap:.5rem}.creature-rules .rule-item summary{cursor:pointer}.creature-rules .rule-item summary::marker{color:var(--draw-color-primary)}.creature-rules .rule-item p{margin:.25rem 0 0 1.5rem;font-size:.85em;color:var(--text-color-surface);opacity:.8}.creature-rules input[type=checkbox]{width:1rem;height:1rem;accent-color:var(--draw-color-primary);cursor:pointer}.creature-rules label{font-weight:300;color:var(--text-color-surface);cursor:pointer}.creature-rules label:hover{color:var(--text-color-primary)}