body{background-color:#141414;margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}canvas{box-shadow:0 10px 30px rgba(0,0,0,.5)}.controls{position:absolute;top:20px;left:20px;width:200px;padding:10px 15px 15px 15px;background:rgba(15,15,15,.7);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:12px;border:1px solid hsla(0,0%,100%,.1);color:#fff;font-size:12px;transition:all .3s ease;box-shadow:0 4px 15px rgba(0,0,0,.3)}.controls.collapsed{padding-bottom:10px}.controls.collapsed .controls-content{display:none}.controls.collapsed .toggle-icon{transform:rotate(-180deg)}.controls .controls-header{display:flex;justify-content:space-between;align-items:center;cursor:pointer;margin-bottom:15px;user-select:none}.controls .controls-header strong{font-size:14px;letter-spacing:.05em}.controls .controls-header .toggle-icon{transition:transform .3s ease}.controls.collapsed .controls-header{margin-bottom:0}.controls .control-group{margin-bottom:15px;display:flex;flex-direction:column;gap:5px}.controls .control-group.horizontal{flex-direction:row;align-items:center;gap:10px;padding:.5rem 0}.controls .control-group.horizontal input[type=checkbox]{width:auto;margin:0}.controls .control-group.horizontal label{text-transform:none;opacity:1;cursor:pointer}.controls .control-group.inline{flex-direction:row;align-items:center;justify-content:space-between;gap:10px}.controls .control-group.inline label{margin-bottom:0;white-space:nowrap}.controls .control-group.inline select{flex:1;max-width:80px}.controls .control-group:last-child{margin-bottom:0}.controls .control-group label{text-transform:uppercase;letter-spacing:.05em;opacity:.7;user-select:none}.controls .control-group input[type=range]{width:100%;cursor:pointer}.controls .control-group input[type=color]{width:100%;height:25px;border:none;background:rgba(0,0,0,0);cursor:pointer}.controls .control-group input[type=text]{background:hsla(0,0%,100%,.1);border:1px solid hsla(0,0%,100%,.2);color:#fff;border-radius:4px;padding:6px 8px;font-size:11px;outline:none}.controls .control-group input[type=text]:focus{border-color:hsla(0,0%,100%,.4)}.controls .control-group select{background:hsla(0,0%,100%,.1);border:1px solid hsla(0,0%,100%,.2);color:#fff;border-radius:4px;padding:4px;font-size:11px;cursor:pointer;outline:none}.controls .control-group select option{background:#282828}.controls .animation-settings{padding-left:2rem;margin-top:10px}.controls .animation-settings.hidden{display:none}
