*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;overflow:hidden;width:100%;height:100%;min-height:100vh;min-height:100dvh;font-family:Poppins,sans-serif;-webkit-tap-highlight-color:transparent;touch-action:manipulation;background-color:#1a1a2e;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}canvas{display:block;width:100%;height:100%;position:fixed;top:0;left:0;right:0;bottom:0;touch-action:none}.controls,.particle-systems-list{position:absolute;top:10px;background-color:#000000b3;border-radius:5px;padding:15px;color:#fff;z-index:10;max-height:90vh;overflow-y:auto;width:240px;box-sizing:border-box;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}.controls{left:10px}.particle-systems-list{right:10px}.controls h3,.particle-systems-list h3{margin:0 0 15px;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:8px;font-weight:500;text-align:center;font-size:16px;letter-spacing:.5px}.slider-container{margin:12px 0}.color-container{margin:12px 0;display:flex;align-items:center}.color-container.hidden,.hidden{display:none}label{display:inline-block;width:150px;font-size:14px;font-weight:300}.checkbox-container{margin:12px 0;display:flex;align-items:center}.checkbox-container input{margin-right:10px}.color-input{width:60px;height:30px;margin-right:10px;border:none;cursor:pointer;border-radius:3px}.dropdown-container{margin:12px 0;display:flex;align-items:center}.dropdown-container select{min-width:100px;padding:6px;background-color:#222;color:#fff;border:1px solid #444;border-radius:3px;font-family:Poppins,sans-serif;font-size:13px}button{border:none;padding:6px 12px;border-radius:3px;color:#fff;cursor:pointer;font-family:Poppins,sans-serif;font-size:13px;transition:background-color .2s,transform .1s}button:hover{filter:brightness(1.1)}button:active{transform:scale(.98)}input[type=range]{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:100%;height:6px;background:#333;border-radius:3px;outline:none;margin:10px 0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#4caf50;border-radius:50%;cursor:pointer}input[type=range]::-moz-range-thumb{width:16px;height:16px;background:#4caf50;border-radius:50%;cursor:pointer;border:none}.particle-systems-buttons{display:flex;justify-content:space-between;margin-bottom:15px}.particle-systems-button{flex:1;margin:0 4px;text-align:center}.particle-systems-button.add{background-color:#4caf50}.particle-systems-button.duplicate{background-color:#2196f3}.particle-systems-button.delete{background-color:#f44336}.particle-systems-list ul{list-style:none;padding:0;margin:0;max-height:300px;overflow-y:auto}.particle-systems-list li{padding:8px 10px;margin:6px 0;border-radius:3px;cursor:pointer;transition:background-color .2s;background-color:#ffffff1a;font-size:14px}.particle-systems-list li.active{background-color:#fff3;font-weight:500}.particle-systems-list li:hover:not(.active){background-color:#ffffff26}.play-button-container{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom,0px));left:50%;transform:translate(-50%);z-index:10}.play-button{background-color:#4caf50;color:#fff;font-size:16px;font-weight:500;padding:10px 30px;border-radius:30px;box-shadow:0 4px 8px #0000004d}.play-button:hover{background-color:#45a049}.tabs-navigation{display:flex;margin-bottom:15px;border-radius:4px;overflow:hidden}.tab-button{flex:1;background-color:#323232b3;color:#ccc;border:none;padding:8px 0;font-size:13px;cursor:pointer;transition:all .2s;border-bottom:2px solid transparent}.tab-button:hover{background-color:#3c3c3ccc;color:#fff}.tab-button.active{background-color:#464646e6;color:#fff;border-bottom:2px solid #4CAF50;font-weight:500}.tab-content{display:none;padding:5px 0}.tab-content.active{display:block;animation:fadeIn .3s ease-in}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.controls{width:280px}.section{margin-top:15px;border-top:1px solid rgba(255,255,255,.2);padding-top:15px}.section h4{margin:0 0 10px;font-weight:500;font-size:14px}h4{margin:0}.texture-container{margin-top:10px}.control-row{margin:10px 0;display:flex;align-items:center}.file-input-container{position:relative;overflow:hidden;display:inline-block}.file-input-container input[type=file]{position:absolute;font-size:100px;opacity:0;right:0;top:0;cursor:pointer}.file-input-button{display:inline-block;background-color:#4caf50;color:#fff;padding:6px 12px;border-radius:3px;font-family:Poppins,sans-serif;font-size:13px;cursor:pointer;transition:background-color .2s,transform .1s}.file-input-button:hover{background-color:#45a049;filter:brightness(1.1)}.file-input-container:active .file-input-button{transform:scale(.98)}.texture-preview{width:64px;height:64px;background-color:#333;border:1px solid #555;display:flex;align-items:center;justify-content:center;color:#999;font-size:12px}.texture-thumbnail-container{display:flex;flex-direction:column;align-items:center;width:100%}.texture-thumbnail{width:64px;height:64px;background-color:#333;background-position:center;background-size:cover;background-repeat:no-repeat;display:flex;justify-content:center;align-items:center}.texture-thumbnail img{width:100%;height:100%;object-fit:contain}.texture-remove-button{margin-top:5px}.small-button{padding:4px 8px;font-size:12px}.texture-button-row{justify-content:center;margin-top:10px}.texture-delete-button{background-color:#f44336;color:#fff;padding:6px 12px;border-radius:3px;font-size:13px;width:100%;max-width:200px;text-align:center;margin-top:8px}.texture-delete-button:hover{background-color:#e53935}.attractor-controls{margin-top:15px;border-top:1px solid rgba(255,255,255,.2);padding-top:15px}.axis-control{margin:8px 0}.axis-control-row{display:flex;align-items:center;margin-bottom:5px}.axis-label{width:20px;font-weight:500;color:#ddd}.file-operations{display:flex;justify-content:space-between;margin-top:10px}.save-load-button{background-color:#4caf50;color:#fff;border:none;border-radius:3px;padding:5px 10px;cursor:pointer;font-size:13px;font-weight:400;width:115px;transition:background-color .2s}.custom-file-upload{display:inline-block;cursor:pointer;background-color:#4caf50;text-align:center;font-size:13px;font-weight:400;color:#fff;border:none;border-radius:3px;padding:5px 10px;width:115px;box-sizing:border-box;transition:background-color .2s}.custom-file-upload input[type=file]{display:none}.examples-panel{position:absolute;bottom:10px;right:10px;background-color:#000000b3;border-radius:5px;padding:15px;color:#fff;z-index:10;width:240px}.examples-panel h3{margin:0 0 15px;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:8px;font-weight:500;text-align:center;font-size:16px;letter-spacing:.5px}.examples-list{list-style:none;padding:0;margin:0}.example-item{padding:8px 10px;margin:6px 0;border-radius:3px;cursor:pointer;transition:background-color .2s;background-color:#ffffff1a;font-size:14px;text-align:center}.example-item:hover{background-color:#4caf50}.example-item:active{transform:scale(.98)}.mobile-toggle{display:none;position:fixed;z-index:100;width:44px;height:44px;border-radius:50%;background-color:#000c;border:2px solid rgba(255,255,255,.3);color:#fff;font-size:20px;cursor:pointer;padding:0;box-shadow:0 2px 8px #0006;transition:transform .2s,background-color .2s}.hamburger-icon{display:block;width:18px;height:2px;background-color:#fff;position:relative}.hamburger-icon:before,.hamburger-icon:after{content:"";display:block;width:18px;height:2px;background-color:#fff;position:absolute;left:0}.hamburger-icon:before{top:-6px}.hamburger-icon:after{top:6px}.mobile-toggle:hover{background-color:#1e1e1ee6;transform:scale(1.05)}.mobile-toggle:active{transform:scale(.95)}.mobile-toggle.controls-toggle{top:calc(10px + env(safe-area-inset-top,0px));left:calc(10px + env(safe-area-inset-left,0px))}.mobile-toggle.systems-toggle{top:calc(10px + env(safe-area-inset-top,0px));right:calc(10px + env(safe-area-inset-right,0px))}.gear-icon{width:24px;height:24px}.mobile-toggle.examples-toggle{bottom:calc(80px + env(safe-area-inset-bottom,0px));right:calc(10px + env(safe-area-inset-right,0px))}.mobile-close{display:none;position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;background-color:#ffffff1a;border:none;color:#fff;font-size:18px;cursor:pointer;padding:0;z-index:5}.mobile-close:hover{background-color:#fff3}@media screen and (max-width: 1024px){.controls,.particle-systems-list{width:220px;padding:12px}.examples-panel{width:200px;padding:12px}label{width:130px;font-size:13px}.tab-button{font-size:11px;padding:6px 0}}@media screen and (max-width: 768px){.mobile-toggle,.mobile-close{display:flex;align-items:center;justify-content:center}.controls,.particle-systems-list,.examples-panel{position:fixed;top:0;bottom:0;max-height:100vh;max-height:100dvh;width:85%;max-width:320px;border-radius:0;transform:translate(-100%);transition:transform .3s ease-in-out;z-index:50;box-sizing:border-box;overflow-x:hidden;overflow-y:auto}.controls{left:0;padding:calc(50px + env(safe-area-inset-top,0px)) 15px env(safe-area-inset-bottom,0px) calc(15px + env(safe-area-inset-left,0px))}.particle-systems-list{right:0;left:auto;transform:translate(100%);padding:calc(50px + env(safe-area-inset-top,0px)) calc(15px + env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) 15px}.examples-panel{right:0;left:auto;bottom:0;top:auto;max-height:60vh;width:100%;max-width:100%;transform:translateY(100%);border-radius:15px 15px 0 0;padding:20px calc(15px + env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) calc(15px + env(safe-area-inset-left,0px))}.controls.mobile-visible,.particle-systems-list.mobile-visible{transform:translate(0)}.examples-panel.mobile-visible{transform:translateY(0)}.mobile-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;z-index:40}.mobile-overlay.active{display:block}.play-button-container{bottom:15px}.play-button{padding:12px 40px;font-size:15px}.controls h3,.particle-systems-list h3,.examples-panel h3{font-size:18px;margin-bottom:10px}label{width:100%;display:block;margin-bottom:5px;font-size:13px}.slider-container{margin:10px 0}.checkbox-container label{width:auto;display:inline}.color-container{flex-wrap:wrap}.color-container label{width:auto;margin-right:10px}.dropdown-container{flex-direction:column;align-items:flex-start}.dropdown-container select{width:100%;margin-top:5px}.tabs-navigation{flex-wrap:wrap}.tab-button{flex:1 1 45%;font-size:12px;padding:8px 5px;margin:2px;border-radius:4px}.particle-systems-buttons{flex-wrap:wrap;gap:5px}.particle-systems-button{flex:1 1 30%;margin:0;padding:8px 5px;font-size:12px}.file-operations{flex-direction:column;gap:8px}.save-load-button,.custom-file-upload{width:100%}.examples-list{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.example-item{flex:1 1 45%;max-width:45%}.control-row{flex-direction:column;align-items:flex-start}.control-row label{margin-bottom:8px}.axis-control-row{flex-wrap:wrap}}@media screen and (max-width: 480px){.mobile-toggle{width:40px;height:40px;font-size:18px}.controls,.particle-systems-list{width:100%;max-width:100%}.tab-button{flex:1 1 48%;font-size:11px;padding:7px 3px}.play-button{padding:10px 30px;font-size:14px}.play-button-container{bottom:10px}.controls h3,.particle-systems-list h3,.examples-panel h3{font-size:16px}h4{font-size:13px}label,.checkbox-container label{font-size:12px}input[type=range]{height:8px}input[type=range]::-webkit-slider-thumb{width:20px;height:20px}input[type=range]::-moz-range-thumb{width:20px;height:20px}.checkbox-container input{width:20px;height:20px}.example-item{flex:1 1 100%;max-width:100%}.particle-systems-button{padding:10px 5px}.particle-systems-list li{padding:12px 10px}}@media screen and (max-width: 360px){.controls,.particle-systems-list,.examples-panel{padding:45px 10px 10px}.tab-button{font-size:10px}}@media screen and (max-height: 500px) and (orientation: landscape){.controls,.particle-systems-list{padding-top:40px}.examples-panel{max-height:80vh}.slider-container,.checkbox-container{margin:8px 0}.play-button-container{bottom:10px}.play-button{padding:8px 25px;font-size:13px}}