*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0a0a0f;--surface:#12121a;--border:#2a2a3a;--accent:#5060ff;--accent2:#00d4ff;--text:#d8d8f0;--muted:#6868a0;--radius:6px;font-size:13px}html,body{background:var(--bg);width:100%;height:100%;color:var(--text);font-family:Segoe UI,system-ui,sans-serif;overflow:hidden}#app{width:100vw;height:100vh;display:flex;overflow:hidden}#controls{background:var(--surface);border-right:1px solid var(--border);scrollbar-width:thin;scrollbar-color:var(--border) transparent;flex-direction:column;gap:0;width:220px;min-width:220px;height:100vh;padding-bottom:16px;display:flex;overflow-y:auto}#controls header{border-bottom:1px solid var(--border);padding:20px 16px 12px}#controls header h1{letter-spacing:.06em;background:linear-gradient(135deg, var(--accent2), var(--accent));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1.5rem;font-weight:700}#controls header .subtitle{color:var(--muted);letter-spacing:.04em;margin-top:2px;font-size:.8rem}.control-group{border-bottom:1px solid var(--border);flex-direction:column;gap:6px;padding:12px 16px;display:flex}.control-group h2{letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:4px;font-size:.7rem}label{justify-content:space-between;align-items:baseline;margin-top:4px;display:flex}label .lbl{color:var(--text);font-size:.85rem}label .val{color:var(--accent2);font-variant-numeric:tabular-nums;font-size:.8rem}input[type=range]{width:100%;accent-color:var(--accent);cursor:pointer;height:4px;margin-bottom:2px}.preset-grid{grid-template-columns:1fr 1fr;gap:6px;display:grid}.preset-btn{background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;text-align:center;padding:6px 8px;font-size:.8rem;line-height:1.2;transition:background .15s,border-color .15s,color .15s}.preset-btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}select{background:var(--bg);width:100%;color:var(--text);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;appearance:auto;padding:6px 8px;font-size:.85rem}select:focus{outline:1px solid var(--accent)}.tool-row{gap:8px;display:flex}.tool-btn{background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;flex:1;padding:7px;font-size:.85rem;transition:background .15s,border-color .15s}.tool-btn:hover{background:#1e1e30}.tool-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}#viewport{background:#050508;flex:1;justify-content:center;align-items:center;display:flex;overflow:hidden}#lenia-canvas{width:min(100vw - 220px,100vh);height:min(100vw - 220px,100vh);image-rendering:pixelated;image-rendering:crisp-edges;display:block}