:root{--background-color: #0e0e11;--text-color: #f5f5f7;--aside-background: #1c1c22;--canvas-background: #141418;--accent-color: #5ec8ff;--accent-color-alt: #ff6b6b;--border-color: #2a2a32;--shadow-color: rgba(0, 0, 0, .5)}html,body,#app{margin:0;padding:0;height:100%;width:100%;overflow:hidden;font-family:sans-serif;background-color:var(--background-color);color:var(--text-color)}.main-content{display:flex;flex-direction:row;align-items:stretch;justify-content:stretch;height:100vh;width:100%}.canvasWrapper{flex:1 1 auto;display:flex;align-items:center;justify-content:center;background:var(--canvas-background);box-shadow:0 4px 8px #0003;width:auto;height:100%;min-width:0}#boidsCanvas{width:100%;height:100%;display:block}.aside{flex:0 0 35%;max-width:420px;min-width:260px;height:100%;background-color:var(--aside-background);overflow-y:auto;box-shadow:4px 0 12px #00000059}.spacer{height:15px;width:100%}.controls{display:flex;flex-direction:column;gap:1rem;text-align:left;padding:2rem}h1{padding-inline:2rem;padding-top:2rem;margin:0;text-align:left}.param-group{border-bottom:1px solid var(--border-color);padding-bottom:.75rem;margin-bottom:.75rem}.param-group-header{width:100%;display:flex;align-items:center;gap:.5rem;padding:0;margin:0;background:none;border:none;color:var(--text-color);font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;cursor:pointer}.param-group-header:hover{color:var(--accent-color)}.param-group-chevron{font-size:.75rem;opacity:.8;flex:0 0 auto}.param-group-title{flex:1 1 auto;text-align:left;color:#7fe29c}.param-group-content{padding-top:.5rem;display:flex;flex-direction:column;gap:.5rem}.param-group.collapsed .param-group-content{display:none}button{cursor:pointer;padding:10px 15px;border:none;background-color:#333;color:#ccc;border-radius:4px}.preset-row{display:flex;gap:.5rem;margin-bottom:.5rem}@media(max-width:1220px){html,body,#app{overflow:auto}.main-content{flex-direction:column;height:auto;min-height:100vh}.canvasWrapper{order:1;width:100%;height:55vh;min-height:260px;box-shadow:0 4px 8px #0003}.aside{order:2;flex:0 0 auto;width:100%;max-width:100%;height:auto;max-height:45vh;overflow-y:auto;box-shadow:0 -4px 12px #00000059}h1{padding-inline:1.5rem;padding-top:1.5rem}.controls{padding:1.5rem;gap:.75rem}}@media(max-width:768px){.controls{padding:1rem;gap:.5rem}h1{padding-inline:1rem;padding-top:1rem;font-size:1.1rem}.param-group-header{font-size:.75rem}}