@import"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap";:root{--bg-primary: #0a0a0f;--bg-secondary: rgba(20, 20, 30, .7);--text-primary: #ffffff;--text-secondary: #a0a0b0;--accent-color: #6366f1;--accent-hover: #818cf8;--card-bg: rgba(255, 255, 255, .03);--card-border: rgba(255, 255, 255, .08);--glow: 0 0 20px rgba(99, 102, 241, .3)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Outfit,sans-serif;background-color:var(--bg-primary);color:var(--text-primary);overflow:hidden;height:100vh;width:100vw;background:radial-gradient(circle at 50% 50%,#1a1a2e,#0a0a0f)}#root{width:100%;height:100%}.controls-panel{position:absolute;bottom:30px;left:50%;transform:translate(-50%);background:var(--bg-secondary);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--card-border);border-radius:24px;padding:20px 30px;display:flex;gap:20px;box-shadow:0 8px 32px #0000004d;z-index:10;transition:all .3s ease}.controls-group{display:flex;flex-direction:column;align-items:center;gap:10px}.controls-group:not(:last-child){padding-right:20px;border-right:1px solid var(--card-border)}.controls-title{font-size:.85rem;font-weight:600;letter-spacing:1px;color:var(--text-secondary);text-transform:uppercase}.buttons-row{display:flex;gap:12px}.control-btn{display:flex;align-items:center;gap:8px;background:var(--card-bg);border:1px solid var(--card-border);color:var(--text-primary);padding:10px 18px;border-radius:12px;font-family:Outfit,sans-serif;font-size:.95rem;font-weight:400;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1)}.control-btn:hover{background:#ffffff14;transform:translateY(-2px)}.control-btn.active{background:var(--accent-color);border-color:var(--accent-hover);box-shadow:var(--glow);font-weight:600}.magnet-btn{background:linear-gradient(135deg,#ec4899,#8b5cf6);border:none;font-weight:600;position:relative;overflow:hidden}.magnet-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:all .5s ease}.magnet-btn:hover:before{left:100%}.magnet-btn.active{box-shadow:0 0 25px #ec489980;animation:pulse-border 2s infinite}@keyframes pulse-border{0%{box-shadow:0 0 #ec489966}70%{box-shadow:0 0 0 10px #ec489900}to{box-shadow:0 0 #ec489900}}.app-header{position:absolute;top:30px;left:40px;z-index:10;pointer-events:none}.app-title{font-size:2.5rem;font-weight:800;background:linear-gradient(to right,#fff,#a0a0b0);-webkit-background-clip:text;color:transparent;margin-bottom:5px}.app-subtitle{font-size:1rem;color:var(--text-secondary);font-weight:300}.canvas-container{width:100vw;height:100vh;position:absolute;top:0;left:0}canvas{display:block}