html,body{margin:0;padding:0;width:100%;height:100%;font-family:Inter,sans-serif;color:#f5f5f5;background-color:#292929}*{box-sizing:border-box}.text-muted{color:#ddd}.text-light{color:#f5f5f5}.gradient-text{background:linear-gradient(135deg,#667eea,#764ba2,#0d7377);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700}.terminal-symbol{background:linear-gradient(135deg,#667eea,#764ba2,#0d7377);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-family:Courier New,monospace;font-size:.8em;animation:terminalBlink 1.5s infinite;text-shadow:0 0 10px rgba(102,126,234,.3)}.glass{background:#00000080;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:8px}.flex{display:flex}.flex-column{flex-direction:column}.justify-center{justify-content:center}.align-center{align-items:center}.gap-1{gap:.5rem}.gap-2{gap:1rem}.fixed{position:fixed}.relative{position:relative}.m-0{margin:0}.mt-0{margin-top:0}.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.btn{color:#fff;border:none;cursor:pointer;font-family:Inter,sans-serif;font-weight:600;border-radius:6px;transition:all .3s ease;text-decoration:none;display:inline-block;text-align:center}.btn-fluid{width:100%}.btn:hover{transform:translateY(-2px) scale(1.02)}.btn:active{transform:translateY(0) scale(.98)}.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 4px 14px #667eea66}.btn-primary:hover{box-shadow:0 6px 20px #667eea66}.btn-secondary{background:linear-gradient(135deg,#0d7377,#14a085);box-shadow:0 4px 14px #0d737766}.btn-secondary:hover{box-shadow:0 6px 20px #0d737766}.btn-dark{background:linear-gradient(135deg,#333,#555);box-shadow:0 4px 14px #0006}.btn-dark:hover{box-shadow:0 6px 20px #0000004d}.icon{fill:currentColor;vertical-align:middle}.icon-sm{width:16px;height:16px}.icon-md{width:1.75rem;height:1.75rem}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes terminalBlink{0%,50%{opacity:1}51%,to{opacity:.3}}.fade-in-up{opacity:0;animation:fadeInUp .6s ease-out forwards}.delay-1{animation-delay:.1s}.delay-2{animation-delay:.2s}.delay-3{animation-delay:.3s}.delay-4{animation-delay:.4s}.delay-5{animation-delay:.5s}.delay-6{animation-delay:.6s}.hidden{display:none!important}@media (max-width: 768px){.btn{font-size:.9rem}}@media (max-width: 480px){.btn{font-size:.85rem}}body{overflow:hidden}.controls{position:fixed;box-sizing:border-box;top:0;left:0;z-index:1000;padding:20px;max-width:500px;width:100%;height:min-content;max-height:100%;overflow-y:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:0rem 1rem;grid-template-rows:auto;border-top-left-radius:0;border-top-right-radius:0}.controls h2{margin-top:0;color:#f5f5f5;font-size:1.2rem;grid-column:1 / -1}.controls label{display:block;margin-bottom:16px}.controls label span{display:block;margin-bottom:6px;color:#f5f5f5;font-weight:500;font-size:.9rem}.controls label.row{display:flex;align-items:center;gap:12px}.controls label.row span{margin-bottom:0;flex-shrink:0;min-width:120px}.controls input[type=text],.controls input[type=number],.controls select{width:100%;padding:10px 12px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:6px;color:#f5f5f5;font-family:Inter,sans-serif;font-size:.9rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background-color .3s ease,border-color .3s ease;box-sizing:border-box}.controls input[type=range]{width:100%;height:6px;background:#ffffff1a;border-radius:3px;outline:none;cursor:pointer;-webkit-appearance:none;appearance:none;transition:all .3s ease}.controls input[type=range]~.range-value{display:block;margin-top:8px;color:#f5f5f5;font-size:.9rem}.controls input[type=range]::-webkit-slider-track{width:100%;height:6px;background:#ffffff1a;border-radius:3px;border:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.controls input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:18px;width:18px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);cursor:pointer;border:2px solid #3a3a3a;box-shadow:0 2px 8px #667eea66,0 0 0 1px #ffffff1a;transition:all .3s ease}.controls input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:0 4px 12px #667eea99,0 0 0 2px #3a3a3a}.controls input[type=range]::-webkit-slider-thumb:active{transform:scale(.95);box-shadow:0 2px 6px #667eeacc,0 0 0 2px #ffffff4d}.controls input[type=range]::-moz-range-track{width:100%;height:6px;background:#ffffff1a;border-radius:3px;border:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.controls input[type=range]::-moz-range-thumb{height:18px;width:18px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);cursor:pointer;border:2px solid #ffffff;box-shadow:0 2px 8px #667eea66,0 0 0 1px #ffffff1a;transition:all .3s ease;-moz-appearance:none;appearance:none}.controls input[type=range]::-moz-range-thumb:hover{transform:scale(1.1);box-shadow:0 4px 12px #667eea99,0 0 0 2px #fff3}.controls input[type=range]::-moz-range-thumb:active{transform:scale(.95);box-shadow:0 2px 6px #667eeacc,0 0 0 2px #ffffff4d}.controls input[type=range]:focus{outline:none}.controls input[type=range]:focus::-webkit-slider-thumb{box-shadow:0 4px 12px #667eea99,0 0 0 2px #667eea66}.controls input[type=range]:focus::-moz-range-thumb{box-shadow:0 4px 12px #667eea99,0 0 0 2px #667eea66}.controls input[type=text]::placeholder,.controls input[type=number]::placeholder{color:#f5f5f566}.controls input[type=text]:focus,.controls input[type=number]:focus,.controls select:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 2px #667eea33}.controls input[type=text]:hover:not(:focus),.controls input[type=number]:hover:not(:focus),.controls select:hover:not(:focus){border-color:#fff3}.controls input[type=color]{width:100%;height:40px;padding:0;border:1px solid rgba(255,255,255,.1);border-radius:6px;background:transparent;cursor:pointer;transition:all .3s ease;overflow:hidden}.controls input[type=color]::-webkit-color-swatch-wrapper{padding:0;border-radius:6px;overflow:hidden}.controls input[type=color]::-webkit-color-swatch{border:none;border-radius:6px}.controls input[type=color]::-moz-color-swatch{border:none;border-radius:6px}.controls input[type=color]:hover{border-color:#ffffff4d}.controls input[type=color]:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 2px #667eea33}.controls select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f5f5f5' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:40px;cursor:pointer}.controls select option{background:#292929;color:#f5f5f5;padding:8px}.controls::-webkit-scrollbar{width:6px}.controls::-webkit-scrollbar-track{border-radius:3px;background:#ffffff0d}.controls::-webkit-scrollbar-thumb{border-radius:3px;background-color:#667eea99;transition:background-color .3s ease}.controls::-webkit-scrollbar-thumb:hover{background:#667eeacc}.controls input.locked,.controls select.locked{opacity:.5;pointer-events:none;background:#ffffff05}.controls label.locked span{opacity:.5}.controls .toggle-label{grid-column:1 / -1}.controls .toggle-switch{position:relative;display:inline-block;width:55px;height:35px;margin-top:6px}.controls .toggle-switch input[type=checkbox]{opacity:0;width:0;height:0;position:absolute}.controls .toggle-slider{position:absolute;cursor:pointer;inset:0;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:28px;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.controls .toggle-slider:before{position:absolute;content:"";height:20px;width:20px;left:4px;top:50%;transform:translateY(-50%);background:#f5f5f5;border-radius:50%;transition:all .3s ease;box-shadow:0 2px 4px #0003}.controls .toggle-switch input:checked+.toggle-slider{background:#667eea99;border-color:#667eea}.controls .toggle-switch input:checked+.toggle-slider:before{transform:translate(calc(100% + 5px)) translateY(-50%);background:#fff}.controls .toggle-switch:hover .toggle-slider{background:#ffffff26}.controls .toggle-switch input:checked:hover+.toggle-slider{background:#667eeacc}.controls .toggle-switch input:focus+.toggle-slider{box-shadow:0 0 0 2px #667eea33}.controls button{padding:8px 16px;font-size:.9rem;grid-column:1 / -1}.controls-tabs{display:flex;grid-column:1 / -1;margin:-20px -20px 20px;background:#ffffff0d;border-bottom:1px solid rgba(255,255,255,.1)}.tab-button{flex:1;padding:12px 16px;background:transparent;border:none;color:#f5f5f5b3;font-family:Inter,sans-serif;font-weight:500;font-size:.9rem;cursor:pointer;transition:background-color .3s ease,color .3s ease;position:relative;border-bottom:2px solid #646464}.tab-button:hover{color:#f5f5f5;background-color:#ffffff1a}.tab-button.active{color:#f5f5f5;background:linear-gradient(135deg,#667eeab0,#764ba233);border-bottom:2px solid #667eea}.tab-content{display:none;grid-column:1 / -1;width:100%}.tab-content.active{display:grid;grid-template-columns:repeat(2,1fr);gap:0rem 1rem;grid-template-rows:auto}.tab-content h2{margin-top:0;color:#f5f5f5;font-size:1.2rem;grid-column:1 / -1}.debug-info{grid-column:1 / -1;padding:16px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:6px;color:#f5f5f5;font-family:Courier New,monospace;font-size:1.15rem;line-height:1.4;color:#f5f5f5cc;display:grid;grid-template-columns:repeat(2,1fr);column-gap:1rem}.info{position:fixed;bottom:20px;right:20px;z-index:1000;padding:15px;max-width:300px}.info h3{margin-top:0;color:#f5f5f5;font-size:1rem}.info p{margin:5px 0;font-size:.9rem;color:#ddd}.header{position:fixed;top:20px;right:20px;z-index:1000;text-align:right;padding:15px}.header h1{margin:0;color:#f5f5f5;font-size:1.5rem;display:flex;align-items:center;justify-content:flex-end;gap:.5rem}.header p{margin:5px 0 0;font-size:.8rem;opacity:.8;color:#ddd}canvas{display:block}#canvas-container{width:100%;height:100%}.loading{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);color:#f5f5f5;font-size:1.2rem;z-index:2000}.locked{opacity:.5;pointer-events:none}@media (max-width: 1024px){.controls{max-width:500px}}@media (max-width: 768px){.controls{max-width:400px;padding:15px;grid-template-columns:1fr;gap:16px}.controls h2{font-size:1.1rem}.controls label{margin-bottom:14px}.controls label span{font-size:.85rem}.controls input[type=text],.controls input[type=number],.controls select{padding:8px 10px;font-size:.85rem}.controls input[type=color]{height:35px}.controls .toggle-slider:before{top:50%;left:4px;transform:translateY(-50%)}.controls .toggle-switch input:checked+.toggle-slider:before{transform:translate(calc(100% + 7.5px)) translateY(-50%)}.controls button{padding:6px 12px;font-size:.8rem}.controls-tabs{margin:-15px -15px 16px}.tab-button{padding:10px 12px;font-size:.85rem}.tab-content.active{grid-template-columns:1fr;gap:14px}.header h1{font-size:1.3rem}.header p{font-size:.7rem}.info{max-width:250px;padding:12px}.info h3{font-size:.9rem}.info p{font-size:.8rem}}@media (max-width: 480px){.controls{padding:12px;max-width:calc(100vw - 40px);grid-template-columns:1fr;gap:12px}.controls label{margin-bottom:12px}.controls label.row{flex-direction:column;align-items:flex-start;gap:6px}.controls label.row span{min-width:auto;margin-bottom:4px}.controls input[type=text],.controls input[type=number],.controls select{padding:8px 10px;font-size:.8rem}.controls input[type=color]{height:32px;align-self:flex-start}.controls .toggle-slider:before{left:4px;top:50%;transform:translateY(-50%)}.controls .toggle-switch input:checked+.toggle-slider:before{transform:translate(calc(100% + 5px)) translateY(-50%)}.controls button{padding:5px 10px;font-size:.75rem}.controls-tabs{margin:-12px -12px 12px}.tab-button{padding:8px 10px;font-size:.8rem}.header{top:10px;right:10px;padding:10px}.header h1{font-size:1.1rem}.info{bottom:10px;right:10px;max-width:calc(100vw - 40px);padding:10px}.loading{font-size:1rem}}