layout-main main{display:flex;flex-direction:column;align-items:center;padding:2rem;gap:1.5rem}layout-main #lsystem-canvas{width:100%;height:100%;border:1px solid var(--draw-color-surface);border-radius:4px;background:var(--background-color-surface)}.lsystem-controls{display:flex;flex-flow:column nowrap;gap:1rem}.lsystem-controls .control-group{display:flex;flex-flow:column nowrap;gap:.25rem}.lsystem-controls .control-group label{font-size:.75rem;font-weight:600;text-transform:uppercase;color:var(--text-color-surface);letter-spacing:.05em}.lsystem-controls .control-group select,.lsystem-controls .control-group input[type=range]{width:100%}.lsystem-controls .control-group select{padding:.5rem;font-size:.875rem;color:var(--text-color-surface);background:var(--background-color-surface);border:1px solid var(--draw-color-surface);border-radius:4px;cursor:pointer}.lsystem-controls .control-group select:hover{border-color:var(--draw-color-primary)}.lsystem-controls .control-group select:focus{outline:none;border-color:var(--draw-color-primary)}.lsystem-controls .control-group input[type=range]{height:6px;background:var(--draw-color-surface);border-radius:3px;cursor:pointer;accent-color:var(--draw-color-primary)}.lsystem-controls .control-group input[type=range]::-webkit-slider-thumb{width:16px;height:16px}.lsystem-controls .control-group .value{font-size:.875rem;font-weight:600;color:var(--draw-color-primary);text-align:right}.lsystem-controls .control-row{display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between;gap:.5rem}.lsystem-actions{display:flex;flex-flow:row wrap;gap:.5rem;margin-top:.5rem}.lsystem-actions .button{flex:1;min-width:80px}@media(max-width:767px){.lsystem-controls .control-group select{padding:.75rem}}