*{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0a0a0f;--bg-panel:#111118;--bg-section:#16161f;--border:#252530;--text:#e0e0e8;--text-dim:#888898;--accent:#4fc3f7;--accent-dim:#2a6a8a;--green:#66bb6a;--red:#ef5350;--orange:#ffa726}html,body{background:var(--bg);height:100%;color:var(--text);font-family:SF Mono,Fira Code,Cascadia Code,JetBrains Mono,monospace;font-size:13px;overflow:hidden}#app{height:100vh;width:100vw;height:100dvh;display:flex}#canvas-container{background:var(--bg);flex:1;justify-content:center;align-items:center;min-width:0;display:flex;position:relative}#petri-canvas{touch-action:none;width:100%;height:100%;display:block}#canvas-title{letter-spacing:6px;color:#ffffff14;pointer-events:none;font-size:11px;font-weight:700;position:absolute;top:16px;left:20px}#controls{background:var(--bg-panel);border-left:1px solid var(--border);flex-direction:column;gap:2px;width:300px;min-width:300px;padding:16px;display:flex;overflow-y:auto}#controls::-webkit-scrollbar{width:4px}#controls::-webkit-scrollbar-track{background:0 0}#controls::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.panel-header{border-bottom:1px solid var(--border);margin-bottom:8px;padding-bottom:12px}.panel-header h1{letter-spacing:1px;font-size:20px;font-weight:700}.subtitle{color:var(--text-dim);margin-top:2px;font-size:11px}.control-section{border-bottom:1px solid #ffffff0a;padding:10px 0}.control-section h2{text-transform:uppercase;letter-spacing:2px;color:var(--text-dim);margin-bottom:8px;font-size:10px}.stats-grid{grid-template-columns:1fr 1fr;gap:6px;display:grid}.stat-item{background:var(--bg-section);border-radius:6px;flex-direction:column;padding:8px 10px;display:flex}.stat-label{text-transform:uppercase;letter-spacing:1px;color:var(--text-dim);font-size:9px}.stat-value{color:var(--accent);margin-top:2px;font-size:18px;font-weight:700}.stat-value.born{color:var(--green)}.stat-value.died{color:var(--red)}.chart-container{background:var(--bg-section);border-radius:6px;height:120px;padding:8px}.species-list{flex-direction:column;gap:3px;display:flex}.species-row{background:var(--bg-section);border-radius:4px;align-items:center;gap:8px;padding:4px 8px;font-size:12px;display:flex}.species-dot{border-radius:50%;flex-shrink:0;width:10px;height:10px}.species-name{color:var(--text);flex:1}.species-count{color:var(--text-dim);font-weight:600}.top-creature{background:var(--bg-section);border-radius:6px;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 10px;display:flex}.top-stat{flex-direction:column;min-width:50px;display:flex}.top-stat .label{text-transform:uppercase;color:var(--text-dim);font-size:9px}.top-stat .value{color:var(--text);font-size:14px;font-weight:600}.color-swatch{border-radius:50%;width:16px;height:16px;margin-left:auto}.empty{color:var(--text-dim);font-size:12px;font-style:italic}.selected-header{align-items:center;gap:8px;width:100%;margin-bottom:6px;display:flex}.selected-role{font-size:12px;font-weight:600}.selected-id{color:var(--text-dim);margin-left:auto;font-size:10px}.selected-stats{grid-template-columns:1fr 1fr 1fr;gap:4px;width:100%;display:grid}.button-row{flex-wrap:wrap;gap:6px;display:flex}.button-row.actions{flex-direction:column}.btn{background:var(--bg-section);border:1px solid var(--border);color:var(--text);cursor:pointer;border-radius:6px;padding:8px 14px;font-family:inherit;font-size:12px;transition:all .15s}.btn:hover{border-color:var(--accent-dim);background:#1e1e2a}.btn.primary{background:var(--accent-dim);border-color:var(--accent);color:#fff;font-weight:600}.btn.primary:hover{background:var(--accent);color:var(--bg)}.btn.primary.paused{background:var(--green);border-color:var(--green);color:var(--bg)}.btn.danger{border-color:#ef53504d}.btn.danger:hover{border-color:var(--red);color:var(--red);background:#ef535026}.speed-group{gap:2px;display:flex}.btn.speed{padding:8px 10px;font-size:11px}.btn.speed.active{background:var(--accent-dim);border-color:var(--accent);color:#fff}.slider-group{margin-bottom:10px}.slider-group label{color:var(--text-dim);margin-bottom:4px;font-size:11px;display:block}.slider-row{align-items:center;gap:10px;display:flex}.slider-row input[type=range]{-webkit-appearance:none;appearance:none;background:var(--border);border-radius:2px;outline:none;flex:1;height:4px}.slider-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--accent);cursor:pointer;border:2px solid var(--bg-panel);border-radius:50%;width:14px;height:14px}.slider-row input[type=range]::-moz-range-thumb{background:var(--accent);cursor:pointer;border:2px solid var(--bg-panel);border-radius:50%;width:14px;height:14px}.slider-value{color:var(--accent);text-align:right;min-width:35px;font-size:11px;font-weight:600}.hall-of-fame{flex-direction:column;gap:4px;display:flex}.hof-entry{background:var(--bg-section);border-radius:4px;align-items:center;gap:8px;padding:5px 8px;font-size:11px;display:flex}.hof-rank{color:var(--text-dim);min-width:16px;font-weight:700}.hof-entry:first-child .hof-rank{color:gold}.hof-entry:nth-child(2) .hof-rank{color:silver}.hof-entry:nth-child(3) .hof-rank{color:#cd7f32}.hof-age{color:var(--accent);margin-left:auto;font-weight:700}.hof-cause{color:var(--text-dim);font-size:9px}.shortcut-grid{grid-template-columns:auto 1fr;align-items:center;gap:4px 10px;font-size:11px;display:grid}.shortcut-grid kbd{background:var(--bg-section);border:1px solid var(--border);color:var(--accent);text-align:center;border-radius:3px;min-width:28px;padding:2px 6px;font-family:inherit;font-size:10px}.shortcut-grid span{color:var(--text-dim)}.shortcuts{opacity:.7}@media (max-width:768px){#app{flex-direction:column}#canvas-container{height:45vh;min-height:250px}#controls{border-left:none;border-top:1px solid var(--border);-webkit-overflow-scrolling:touch;width:100%;min-width:0;height:auto;min-height:0;padding-bottom:env(safe-area-inset-bottom,24px);flex:1;overflow-y:auto}#controls .control-section:last-child{margin-bottom:40px;padding-bottom:60px}.panel-header h1{font-size:16px}.stats-grid{grid-template-columns:1fr 1fr 1fr}.stat-value{font-size:14px}.button-row.actions{flex-flow:wrap}.btn{padding:10px 12px;font-size:13px}.slider-row input[type=range]::-webkit-slider-thumb{width:20px;height:20px}.slider-row input[type=range]::-moz-range-thumb{width:20px;height:20px}.shortcuts{display:none}}