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