:root{--natural-selection-color-organism:#3498db;--natural-selection-color-food:#27ae60;--natural-selection-color-speed:#e74c3c;--natural-selection-color-size:#3498db;--natural-selection-color-vision:#f39c12;--natural-selection-color-metabolism:#9b59b6}layout-main main{display:flex;flex-direction:column;align-items:center;padding:2rem;gap:1.5rem}layout-main #natural-selection-canvas{width:100%;height:100%;border:1px solid var(--draw-color-surface);border-radius:4px;background:var(--background-color-surface)}.natural-selection-controls .natural-selection-actions{display:flex;flex-flow:row nowrap;justify-content:center;gap:.5rem}.natural-selection-controls .is-start{display:inline-flex}.natural-selection-controls .is-pause{display:none}.natural-selection-controls.is-running .is-start{display:none}.natural-selection-controls.is-running .is-pause{display:inline-flex}.natural-selection-stats{display:flex;flex-flow:column nowrap;gap:.75rem}.natural-selection-stats .stat-item{display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between;gap:.5rem}.natural-selection-stats .stat-item .label{display:flex;align-items:center;gap:.5rem;font-weight:300;color:var(--text-color-surface)}.natural-selection-stats .stat-item .label .swatch{display:inline-block;width:.75rem;height:.75rem;border-radius:50%}.natural-selection-stats .stat-item .label .swatch.organism{background-color:var(--natural-selection-color-organism)}.natural-selection-stats .stat-item .label .swatch.food{background-color:var(--natural-selection-color-food)}.natural-selection-stats .stat-item .value{font-size:1.25rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text-color-surface)}.natural-selection-stats.traits{gap:.5rem}.natural-selection-stats.traits .stat-item .label{font-size:.85rem}.natural-selection-stats.traits .stat-item .value{font-size:1rem;font-weight:500}.natural-selection-graph{width:100%}.natural-selection-graph #population-graph,.natural-selection-graph #traits-graph{width:100%;height:120px;border:1px solid var(--draw-color-surface);border-radius:4px;background:var(--background-color-surface)}.natural-selection-options{display:flex;flex-flow:column nowrap;gap:.75rem}.natural-selection-options .option-item{display:flex;flex-flow:column nowrap;gap:.25rem}.natural-selection-options .option-item label{font-size:.85rem;font-weight:400;color:var(--text-color-surface)}.natural-selection-options .option-item input[type=range]{width:100%;accent-color:var(--draw-color-primary);cursor:pointer}.natural-selection-options .option-item.checkbox{flex-flow:row nowrap;align-items:center}.natural-selection-options .option-item.checkbox label{display:flex;flex-flow:row nowrap;align-items:center;gap:.5rem;cursor:pointer}.natural-selection-options .option-item.checkbox input[type=checkbox]{cursor:pointer}.natural-selection-legend{display:flex;flex-flow:column nowrap;gap:.5rem}.natural-selection-legend.inline{flex-flow:row wrap;gap:1rem}.natural-selection-legend .legend-item{display:inline-flex;flex-flow:row nowrap;align-items:center;gap:.25rem;font-size:.8rem;font-weight:300;color:var(--text-color-surface)}.natural-selection-legend .swatch{display:inline-block;width:.6rem;height:.6rem;border-radius:50%}.natural-selection-legend .swatch.speed{background-color:var(--natural-selection-color-speed)}.natural-selection-legend .swatch.size{background-color:var(--natural-selection-color-size)}.natural-selection-legend .swatch.vision{background-color:var(--natural-selection-color-vision)}.natural-selection-legend .swatch.metabolism{background-color:var(--natural-selection-color-metabolism)}@media(max-width:768px){layout-main main{padding:1rem;gap:1rem}.natural-selection-controls{flex-wrap:wrap}.natural-selection-stats .stat-item .value{font-size:1rem}.natural-selection-graph #population-graph,.natural-selection-graph #traits-graph{height:100px}}