*{box-sizing:border-box;margin:0;padding:0}body{background-color:#2a2a3e;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;overflow:hidden}#canvas1{background-color:#3a3a4f;width:100%;height:100%;position:fixed;top:0;left:0}#image1{display:none}.toggle-controls-btn{z-index:150;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;cursor:pointer;background:#1e1e2df2;border:1px solid #fff3;border-radius:50%;justify-content:center;align-items:center;width:50px;height:50px;font-size:20px;transition:all .3s;display:none;position:fixed;top:20px;right:20px;box-shadow:0 4px 16px #0000004d}.toggle-controls-btn:hover{background:#282837f2;transform:scale(1.05)}.toggle-controls-btn .icon-close,.toggle-controls-btn.active .icon-open{display:none}.toggle-controls-btn.active .icon-close{display:block}.controls{z-index:100;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#1e1e2df2;border:1px solid #ffffff1a;border-radius:16px;min-width:300px;max-width:320px;max-height:90vh;padding:24px;transition:transform .3s,opacity .3s;position:fixed;top:20px;right:20px;overflow-y:auto;box-shadow:0 8px 32px #0006}.controls::-webkit-scrollbar{width:8px}.controls::-webkit-scrollbar-track{background:#ffffff0d;border-radius:4px}.controls::-webkit-scrollbar-thumb{background:#667eea80;border-radius:4px}.controls::-webkit-scrollbar-thumb:hover{background:#667eeab3}.controls h2{color:#fff;text-align:center;letter-spacing:.5px;margin:0 0 20px;font-size:20px;font-weight:600}.controls h3{color:#a8b5ff;text-transform:uppercase;letter-spacing:1px;margin:0 0 12px;font-size:13px;font-weight:600}.separator{background:#ffffff1a;height:1px;margin:20px 0}.control-group{gap:10px;margin-bottom:20px;display:flex}.control-group button{flex:1}button{cursor:pointer;text-transform:uppercase;letter-spacing:.5px;border:none;border-radius:8px;padding:12px 20px;font-size:14px;font-weight:600;transition:all .2s}.btn-primary{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);box-shadow:0 4px 15px #667eea66}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea99}.btn-primary:active{transform:translateY(0)}.btn-secondary{color:#fff;background:#ffffff1a;border:1px solid #fff3}.btn-secondary:hover{background:#ffffff26;transform:translateY(-2px)}.btn-accent{color:#fff;background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%);width:100%;box-shadow:0 4px 15px #f5576c66}.btn-accent:hover{transform:translateY(-2px);box-shadow:0 6px 20px #f5576c99}.btn-accent:active{transform:translateY(0)}.control-item{margin-bottom:20px}.control-item:last-child{margin-bottom:0}.control-item label{color:#e0e0e0;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:13px;font-weight:500;display:flex}.label-text{color:#b8b8d0}.value-display{color:#a8b5ff;text-align:center;background:#667eea33;border-radius:6px;min-width:50px;padding:4px 10px;font-size:12px;font-weight:600}.help-text{color:#8b8ba8;margin-top:4px;font-size:11px;font-style:italic;display:block}.switch{width:48px;height:24px;display:inline-block;position:relative}.switch input{opacity:0;width:0;height:0}.slider{cursor:pointer;background-color:#ffffff1a;border:1px solid #fff3;border-radius:24px;transition:all .3s;position:absolute;inset:0}.slider:before{content:"";background-color:#fff;border-radius:50%;width:18px;height:18px;transition:all .3s;position:absolute;bottom:2px;left:3px}input:checked+.slider{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-color:#0000}input:checked+.slider:before{transform:translate(22px)}input:focus+.slider{box-shadow:0 0 4px #667eea99}input[type=range]{-webkit-appearance:none;cursor:pointer;background:#ffffff1a;border-radius:3px;outline:none;width:100%;height:6px}input[type=range]::-webkit-slider-thumb{appearance:none;cursor:pointer;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:50%;width:18px;height:18px;transition:all .2s;box-shadow:0 2px 8px #667eea80}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 3px 12px #667eeab3}input[type=range]::-moz-range-thumb{cursor:pointer;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;border-radius:50%;width:18px;height:18px;transition:all .2s;box-shadow:0 2px 8px #667eea80}input[type=range]::-moz-range-thumb:hover{transform:scale(1.2);box-shadow:0 3px 12px #667eeab3}@media (max-width:1024px){.toggle-controls-btn{display:flex}.controls{max-height:calc(100vh - 100px);top:80px;right:20px}.controls.hidden{opacity:0;pointer-events:none;transform:translate(calc(100% + 40px))}}@media (max-width:768px){.toggle-controls-btn{width:45px;height:45px;font-size:18px;top:15px;right:15px}.controls{min-width:auto;max-width:none;max-height:calc(100vh - 90px);padding:20px;top:70px;left:15px;right:15px}.controls h2{margin-bottom:16px;font-size:18px}.control-item{margin-bottom:16px}.control-group{flex-direction:column}.control-group button{width:100%}}@media (max-width:480px){.toggle-controls-btn{width:40px;height:40px;font-size:16px;top:10px;right:10px}.controls{max-height:calc(100vh - 70px);padding:16px;top:60px;left:10px;right:10px}.controls h2{margin-bottom:12px;font-size:16px}.controls h3{margin-bottom:10px;font-size:12px}.separator{margin:16px 0}}