@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes float{0%,to{transform:translate(0) scale(1)}33%{transform:translate(30px,-30px) scale(1.1)}66%{transform:translate(-20px,20px) scale(.9)}}@keyframes particleFloat{0%,to{transform:translate(0);opacity:.6}50%{transform:translate(var(--particle-x, 0),var(--particle-y, 0));opacity:1}}.background-gradient{animation:gradientShift 15s ease infinite}.background-circle{animation:float 8s ease-in-out infinite}.background-particle{animation:particleFloat 10s ease-in-out infinite}.control-panel{background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:16px;padding:1.5rem;box-shadow:0 4px 16px #0003;border:1px solid rgba(255,255,255,.2)}.control-panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.control-panel-title{font-size:1.5rem;font-weight:700;color:#fff;margin:0;text-shadow:0 2px 8px rgba(0,0,0,.3)}.editor-toggle-button{padding:.5rem 1rem;background:#fff3;border:1px solid rgba(255,255,255,.3);border-radius:8px;color:#fff;cursor:pointer;font-size:.875rem;font-weight:600;transition:all .2s}.editor-toggle-button:hover{background:#ffffff4d;border-color:#fff6}.control-panel.editor-mode{max-height:80vh;overflow-y:auto}.control-section{margin-bottom:2.5rem;padding-bottom:1.5rem;border-bottom:1px solid rgba(255,255,255,.1)}.control-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.control-section-title{font-size:1.25rem;font-weight:700;color:#fffffff2;margin:0 0 .5rem;text-shadow:0 2px 8px rgba(0,0,0,.3)}.control-section-description{font-size:.9rem;color:#ffffffbf;margin:0 0 1.5rem;line-height:1.5;font-weight:400}.control-group{margin-bottom:1.5rem}.control-label{display:block;font-size:.875rem;font-weight:600;color:#ffffffe6;margin-bottom:.5rem;text-shadow:0 1px 4px rgba(0,0,0,.2)}.control-description{display:block;font-size:.875rem;color:#ffffffb3;margin-top:.5rem;line-height:1.5;font-weight:400;text-shadow:0 1px 2px rgba(0,0,0,.2)}.control-slider{width:100%;height:6px;border-radius:3px;background:#fff3;outline:none;margin-bottom:.5rem;-webkit-appearance:none;-moz-appearance:none;appearance:none}.control-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 2px 4px #0003}.control-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;cursor:pointer;border:none;box-shadow:0 2px 4px #0003}.control-input{width:100%;padding:.5rem;border:1px solid rgba(255,255,255,.3);border-radius:6px;background:#ffffff1a;color:#fff;font-size:.875rem;outline:none}.control-input:focus{border-color:#ffffff80;background:#ffffff26}.control-select{width:100%;padding:.5rem;border:1px solid rgba(255,255,255,.3);border-radius:6px;background:#ffffff1a;color:#fff;font-size:.875rem;outline:none;cursor:pointer}.control-select:focus{border-color:#ffffff80;background:#ffffff26}.control-select option{background:#000c;color:#fff}.control-button{padding:.5rem 1rem;background:#fff3;border:1px solid rgba(255,255,255,.3);border-radius:8px;color:#fff;cursor:pointer;font-size:.875rem;font-weight:600;transition:all .2s}.control-button:hover{background:#ffffff4d;border-color:#fff6}.control-checkboxes{display:flex;flex-direction:column;gap:.5rem}.control-checkbox-label{display:flex;align-items:center;color:#fff;cursor:pointer;font-size:.875rem;-webkit-user-select:none;user-select:none}.control-checkbox-label:hover{color:#ffffffe6}.control-checkbox{width:18px;height:18px;margin-right:.5rem;cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;background:#ffffff1a;border:2px solid rgba(255,255,255,.3);border-radius:4px;position:relative;transition:all .2s ease;flex-shrink:0}.control-checkbox:hover{background:#ffffff26;border-color:#fff6}.control-checkbox:checked{background:#ffffff40;border-color:#ffffff80}.control-checkbox:checked:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(45deg);width:4px;height:8px;border:solid white;border-width:0 2px 2px 0;border-radius:1px}.control-checkbox:disabled{opacity:.5;cursor:not-allowed}.control-checkbox:disabled:hover{background:#ffffff1a;border-color:#ffffff4d}.code-display{margin-top:1rem;background:#0000004d;border-radius:8px;padding:1rem;border:1px solid rgba(255,255,255,.1)}.code-display-top{margin-top:0;margin-bottom:1.5rem}.code-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;color:#ffffffe6;font-size:.875rem;font-weight:600}.code-copy-button{padding:.25rem .75rem;background:#fff3;border:1px solid rgba(255,255,255,.3);border-radius:4px;color:#fff;cursor:pointer;font-size:.75rem;transition:all .2s}.code-copy-button:hover{background:#ffffff4d}.code-content{background:#00000080;border-radius:4px;padding:.75rem;overflow-x:auto;font-size:.75rem;line-height:1.5;color:#a5d6a7;font-family:Courier New,monospace;margin:0;max-height:300px;overflow-y:auto}.control-panel::-webkit-scrollbar,.code-content::-webkit-scrollbar{width:6px;height:6px}.control-panel::-webkit-scrollbar-track,.code-content::-webkit-scrollbar-track{background:#ffffff0d;border-radius:3px}.control-panel::-webkit-scrollbar-thumb,.code-content::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px;transition:background .2s}.control-panel::-webkit-scrollbar-thumb:hover,.code-content::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.control-panel,.code-content{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) rgba(255,255,255,.05)}.code-content code{color:#a5d6a7;font-family:Courier New,monospace}.app{min-height:100vh;position:relative;overflow-x:hidden}.app-container{display:flex;min-height:100vh;position:relative;z-index:1;gap:2rem;padding:2rem}.use-cases-section{flex:1;max-width:60%;display:flex;flex-direction:column;gap:1.5rem}.title{font-size:2rem;font-weight:700;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.3);margin-bottom:.25rem}.subtitle{font-size:1rem;color:#ffffffe6;text-shadow:0 1px 5px rgba(0,0,0,.2);margin-bottom:.75rem}.background-selector{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;padding:.5rem .75rem;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:8px;border:1px solid rgba(255,255,255,.2)}.background-selector-label{font-size:.875rem;font-weight:600;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.2);white-space:nowrap}.background-buttons{display:flex;gap:.375rem;flex-wrap:wrap}.background-button{padding:.375rem .75rem;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:6px;color:#fff;cursor:pointer;font-size:.75rem;font-weight:500;transition:all .2s}.background-button:hover{background:#fff3;border-color:#ffffff4d}.background-button.active{background:#ffffff4d;border-color:#ffffff80;box-shadow:0 2px 8px #fff3}.use-cases-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-top:2rem}.use-case-item{display:flex;flex-direction:column;gap:1rem}.use-case-title{font-size:1.25rem;font-weight:600;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.3)}.use-case-content{min-height:150px;position:relative}.draggable-wrapper{-webkit-user-select:none;user-select:none}.draggable-wrapper:hover{opacity:.95}.controls-section{flex:0 0 400px;height:100vh;overflow-y:auto;overflow-x:hidden;position:sticky;top:0;padding-right:.5rem}.app::-webkit-scrollbar,.controls-section::-webkit-scrollbar,.use-cases-section::-webkit-scrollbar{width:8px;height:8px}.app::-webkit-scrollbar-track,.controls-section::-webkit-scrollbar-track,.use-cases-section::-webkit-scrollbar-track{background:#ffffff0d;border-radius:4px}.app::-webkit-scrollbar-thumb,.controls-section::-webkit-scrollbar-thumb,.use-cases-section::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px;transition:background .2s}.app::-webkit-scrollbar-thumb:hover,.controls-section::-webkit-scrollbar-thumb:hover,.use-cases-section::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.app,.controls-section,.use-cases-section{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) rgba(255,255,255,.05)}@media (max-width: 1024px){.app-container{flex-direction:column}.use-cases-section{max-width:100%}.controls-section{flex:1;height:auto;max-height:600px;position:relative}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}