@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap";.art-canvas{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000;overflow:hidden;perspective:1000px;transform:translateZ(0);will-change:transform;backface-visibility:hidden}.background-noise{position:absolute;top:0;left:0;width:100%;height:100%;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");opacity:.03;animation:noise .5s steps(5) infinite}@keyframes noise{0%,to{transform:translate(0)}25%{transform:translate(-5%,-5%)}50%{transform:translate(5%,5%)}75%{transform:translate(5%,-5%)}}.particle-canvas,.gradient-orbs{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.orb{position:absolute;border-radius:50%;filter:blur(80px);animation:float 10s ease-in-out infinite;transform:translateZ(0);will-change:transform;backface-visibility:hidden}.orb-1{width:400px;height:400px;background:radial-gradient(circle,var(--custom-primary, rgba(236, 72, 153, .6)) 0%,transparent 70%);top:-10%;left:-10%;animation-delay:0s}.orb-2{width:350px;height:350px;background:radial-gradient(circle,var(--custom-secondary, rgba(139, 92, 246, .6)) 0%,transparent 70%);bottom:-10%;right:-10%;animation-delay:3s}.orb-3{width:300px;height:300px;background:radial-gradient(circle,var(--custom-tertiary, rgba(34, 211, 238, .6)) 0%,transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:6s}.orb-4{width:450px;height:450px;background:radial-gradient(circle,var(--custom-primary, rgba(244, 114, 182, .4)) 0%,transparent 70%);top:30%;right:20%;animation-delay:2s}@keyframes float{0%,to{transform:translate(0) scale(1)}25%{transform:translate(50px,-50px) scale(1.1)}50%{transform:translate(-30px,30px) scale(.9)}75%{transform:translate(-50px,-30px) scale(1.05)}}.artistic-grid{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80vw;height:80vh;display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(5,1fr);gap:2px;opacity:.15}.grid-cell{background:#ffffff1a;border-radius:2px;animation:grid-pulse 3s ease-in-out infinite;animation-delay:var(--delay);transition:transform .3s ease,background .3s ease;transform:translateZ(0);will-change:transform,background;backface-visibility:hidden}.grid-cell:hover{transform:scale(1.5);background:var(--custom-primary, rgba(236, 72, 153, .5))}@keyframes grid-pulse{0%,to{opacity:.1;transform:scale(1)}50%{opacity:.3 + var(--audio-level) * .003;transform:scale(1.2)}}.centerpiece{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:400px;height:400px;transform:translate(-50%,-50%) translateZ(0);will-change:transform;backface-visibility:hidden}.main-circle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(var(--audio-scale));width:200px;height:200px;border-radius:50%;background:conic-gradient(from 0deg,var(--custom-primary, #ec4899),var(--custom-secondary, #8b5cf6),var(--custom-tertiary, #22d3ee),var(--custom-primary, #ec4899));animation:rotate 8s linear infinite;filter:blur(40px);transition:transform .1s ease}.inner-circle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(var(--audio-scale));width:150px;height:150px;border-radius:50%;background:conic-gradient(from 180deg,var(--custom-primary, #f472b6),var(--custom-secondary, #a78bfa),var(--custom-tertiary, #67e8f9),var(--custom-primary, #f472b6));animation:rotate 6s linear infinite reverse;filter:blur(30px);transition:transform .1s ease}.core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(var(--audio-scale));width:80px;height:80px;border-radius:50%;background:radial-gradient(circle,#ffffff 0%,transparent 70%);filter:blur(20px);animation:pulse 3s ease-in-out infinite;transition:transform .1s ease}@keyframes rotate{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes pulse{0%,to{transform:translate(-50%,-50%) scale(var(--audio-scale));opacity:.8}50%{transform:translate(-50%,-50%) scale(calc(var(--audio-scale) * 1.3));opacity:1}}.orbit{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(255,255,255,.1);animation:rotate 20s linear infinite;transform:translate(-50%,-50%) translateZ(0);will-change:transform;backface-visibility:hidden}.ring-1{width:280px;height:280px;animation-duration:25s}.ring-2{width:320px;height:320px;animation-duration:30s;animation-direction:reverse}.ring-3{width:360px;height:360px;animation-duration:35s}.audio-visualizer{position:absolute;bottom:140px;left:50%;transform:translate(-50%);display:flex;gap:4px;align-items:flex-end;height:150px;width:600px;justify-content:center}.audio-bar{width:12px;height:calc(10px + var(--height) * .5px);background:linear-gradient(to top,var(--custom-primary, #ec4899),var(--custom-secondary, #8b5cf6),var(--custom-tertiary, #22d3ee));border-radius:6px;transition:height .05s ease;animation:bar-glow 1s ease-in-out infinite;animation-delay:var(--delay);transform:translateZ(0);will-change:transform,height;backface-visibility:hidden}@keyframes bar-glow{0%,to{opacity:.8}50%{opacity:1;filter:brightness(1.2)}}.fractal-container{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;transition:transform .1s ease-out;will-change:transform}.fractal-svg{width:80vw;height:80vh;filter:drop-shadow(0 0 30px var(--custom-secondary, rgba(139, 92, 246, .3)))}.fractal-svg circle{animation:fractal-pulse 2s ease-in-out infinite}@keyframes fractal-pulse{0%,to{opacity:.6}50%{opacity:1}}.wave-container{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(circle at center,rgba(34,211,238,.05) 0%,transparent 50%)}.wave{position:absolute;width:var(--wave-size, 200px);height:var(--wave-size, 200px);border-radius:50%;background:radial-gradient(circle,hsl(var(--wave-color),70%,60%,.4) 0%,hsl(var(--wave-color),70%,60%,.1) 40%,transparent 70%);animation:wave-expand var(--wave-speed) ease-in-out infinite;animation-delay:var(--wave-offset);transform:translateZ(0);will-change:transform,opacity;backface-visibility:hidden;box-shadow:0 0 30px hsl(var(--wave-color),70%,60%,.3)}@keyframes wave-expand{0%{transform:scale(.8);opacity:.8}50%{transform:scale(1.5);opacity:.4}to{transform:scale(.8);opacity:.8}}.wave-svg{position:absolute;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 0 10px rgba(34,211,238,.3))}.wave-path{transform:translateZ(0);will-change:d,opacity;backface-visibility:hidden;animation:wave-animate var(--wave-speed, 3s) ease-in-out infinite}@keyframes wave-animate{0%{opacity:.6;transform:translateY(0)}50%{opacity:1;transform:translateY(calc(-10px * var(--wave-intensity, 1)))}to{opacity:.6;transform:translateY(0)}}.constellation-container{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.constellation-svg{width:90vw;height:90vh;filter:drop-shadow(0 0 20px var(--custom-primary, rgba(236, 72, 153, .2)))}@keyframes twinkle{0%,to{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.5)}}.noise-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80vw;height:80vh;display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(10,1fr);gap:4px;transition:transform .1s ease-out;will-change:transform}.noise-cell{background:#ffffff0d;border-radius:4px;animation:noise-pulse 3s ease-in-out infinite;animation-delay:var(--noise-delay);transition:transform .3s ease,background .3s ease;transform:translateZ(0);will-change:transform,background;backface-visibility:hidden}.noise-cell:hover{transform:scale(1.3);background:hsl(var(--noise-x) * 36,70%,60%)}@keyframes noise-pulse{0%,to{opacity:.1;transform:scale(1)}50%{opacity:.4;transform:scale(1.1)}}.space-3d-container{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(circle at center,#0f172acc,#000);perspective:1500px}.space-scene{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .1s ease-out;will-change:transform}.starfield-bg{position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(1px 1px at 10% 20%,rgba(255,255,255,.3) 0%,transparent 100%),radial-gradient(1px 1px at 30% 40%,rgba(255,255,255,.2) 0%,transparent 100%),radial-gradient(1px 1px at 50% 60%,rgba(255,255,255,.4) 0%,transparent 100%),radial-gradient(1px 1px at 70% 80%,rgba(255,255,255,.3) 0%,transparent 100%),radial-gradient(1px 1px at 90% 10%,rgba(255,255,255,.2) 0%,transparent 100%);background-size:200px 200px;opacity:.5;animation:starfield-drift 60s linear infinite}@keyframes starfield-drift{0%{transform:translate(0)}to{transform:translate(200px,200px)}}.star{position:absolute;border-radius:50%;animation:star-twinkle var(--twinkle-speed, 3s) ease-in-out infinite;transform:translateZ(0);will-change:transform,opacity;backface-visibility:hidden}@keyframes star-twinkle{0%,to{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}.planet{position:absolute;border-radius:50%;transform-style:preserve-3d;cursor:pointer;transition:transform .3s ease,box-shadow .3s ease;will-change:transform;backface-visibility:hidden}.planet:hover{transform:translateZ(calc(var(--z, 0px) + 80px)) scale(1.3);z-index:100}.planet-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;border:2px solid rgba(255,255,255,.2);animation:ring-rotate 10s linear infinite;transform-style:preserve-3d;will-change:transform;backface-visibility:hidden}@keyframes ring-rotate{0%{transform:translate(-50%,-50%) rotate(0) rotateX(70deg)}to{transform:translate(-50%,-50%) rotate(360deg) rotateX(70deg)}}.planet-glow{position:absolute;top:-50%;left:-50%;width:200%;height:200%;border-radius:50%;pointer-events:none;animation:glow-pulse 4s ease-in-out infinite}@keyframes glow-pulse{0%,to{opacity:.5;transform:scale(1)}50%{opacity:.8;transform:scale(1.1)}}@keyframes planet-float{0%,to{transform:translateZ(var(--z, 0px)) translateY(0)}50%{transform:translateZ(calc(var(--z, 0px) + 10px)) translateY(-10px)}}.meteor{position:absolute;overflow:hidden;transform:translateZ(0);will-change:transform,opacity;backface-visibility:hidden}.meteor-trail{position:absolute;top:0;right:0;width:100%;height:100%;background:linear-gradient(to left,rgba(255,255,255,.8) 0%,rgba(255,255,255,.2) 50%,transparent 100%);border-radius:2px}@keyframes meteor-fly{0%{transform:translate(0);opacity:0}10%{opacity:1}90%{opacity:1}to{transform:translate(-300px,300px);opacity:0}}.nebula{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80%;height:80%;pointer-events:none}.nebula-layer{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;animation:nebula-pulse 8s ease-in-out infinite;will-change:opacity,transform;backface-visibility:hidden}@keyframes nebula-pulse{0%,to{opacity:.3;transform:scale(1)}50%{opacity:.6;transform:scale(1.15)}}.central-star{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;pointer-events:none}.star-core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:30px;height:30px;background:radial-gradient(circle,#fff 0%,#ffd700 30%,#ff8c00 60%,transparent 100%);border-radius:50%;animation:star-pulse 2s ease-in-out infinite;box-shadow:0 0 60px #ffc832cc}.star-corona{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80px;height:80px;background:radial-gradient(circle,rgba(255,200,50,.3) 0%,rgba(255,150,0,.1) 50%,transparent 100%);border-radius:50%;animation:corona-expand 3s ease-in-out infinite}.star-rays{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:120px;height:120px;background:conic-gradient(from 0deg,transparent 0deg,rgba(255,200,50,.1) 10deg,transparent 20deg,transparent 30deg,rgba(255,200,50,.1) 40deg,transparent 50deg,transparent 60deg,rgba(255,200,50,.1) 70deg,transparent 80deg,transparent 90deg,rgba(255,200,50,.1) 100deg,transparent 110deg,transparent 120deg,rgba(255,200,50,.1) 130deg,transparent 140deg,transparent 150deg,rgba(255,200,50,.1) 160deg,transparent 170deg,transparent 180deg,rgba(255,200,50,.1) 190deg,transparent 200deg,transparent 210deg,rgba(255,200,50,.1) 220deg,transparent 230deg,transparent 240deg,rgba(255,200,50,.1) 250deg,transparent 260deg,transparent 270deg,rgba(255,200,50,.1) 280deg,transparent 290deg,transparent 300deg,rgba(255,200,50,.1) 310deg,transparent 320deg,transparent 330deg,rgba(255,200,50,.1) 340deg,transparent 350deg,transparent 360deg);border-radius:50%;animation:ray-rotate 20s linear infinite}@keyframes star-pulse{0%,to{opacity:1}50%{opacity:.9}}@keyframes corona-expand{0%,to{opacity:.5;transform:scale(1)}50%{opacity:.8;transform:scale(1.3)}}@keyframes ray-rotate{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}.orb,.grid-cell,.centerpiece,.orbit,.audio-bar,.star,.planet,.wave,.noise-cell,.floating-shape,.main-circle,.inner-circle,.core,.fractal-svg,.constellation-svg,.nebula-layer{transform:translateZ(0);will-change:transform,opacity;backface-visibility:hidden}.text-overlay{position:absolute;top:8%;left:80px;text-align:left;z-index:10;pointer-events:none}.art-title{font-size:3rem;font-weight:700;color:#fff;letter-spacing:8px;text-transform:uppercase;margin-bottom:12px;background:linear-gradient(135deg,var(--custom-primary, #ec4899) 0%,var(--custom-secondary, #8b5cf6) 50%,var(--custom-tertiary, #22d3ee) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradient-shift 5s ease infinite;background-size:200% 200%}.art-subtitle{font-size:.85rem;color:#ffffff80;letter-spacing:3px;font-weight:300;text-transform:uppercase}@keyframes gradient-shift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.interface{position:absolute;right:0;top:0;bottom:0;width:280px;z-index:100;pointer-events:none;transition:width .4s cubic-bezier(.4,0,.2,1)}.interface.collapsed{width:70px}.sidebar{position:absolute;right:0;top:0;bottom:0;width:280px;background:#000c;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-left:1px solid rgba(255,255,255,.1);padding:40px 30px;pointer-events:auto;display:flex;flex-direction:column;gap:40px;transition:all .4s cubic-bezier(.4,0,.2,1)}.sidebar.collapsed{width:70px;padding:40px 22px}.sidebar-section{display:flex;flex-direction:column;gap:20px;transition:all .4s cubic-bezier(.4,0,.2,1)}.sidebar.collapsed .sidebar-section{gap:12px}.sidebar-title{font-size:.65rem;font-weight:600;color:#fff6;letter-spacing:3px;text-transform:uppercase;margin:0;transition:all .4s cubic-bezier(.4,0,.2,1)}.sidebar.collapsed .sidebar-title{opacity:0;height:0;margin:0;overflow:hidden}.mode-list,.action-list{display:flex;flex-direction:column;gap:8px}.mode-item{display:flex;align-items:center;gap:15px;padding:16px 20px;background:#ffffff08;border:1px solid rgba(255,255,255,.08);border-radius:8px;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden}.sidebar.collapsed .mode-item{padding:16px;justify-content:center}.mode-item:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(135deg,var(--custom-primary, #ec4899),var(--custom-secondary, #8b5cf6));transform:scaleY(0);transition:transform .3s ease}.mode-item:hover{background:#ffffff0f;border-color:#ffffff26}.mode-item.active{background:#ec48991a;border-color:#ec48994d}.mode-item.active:before{transform:scaleY(1)}.mode-indicator{width:8px;height:8px;border-radius:50%;background:#fff3;transition:all .3s ease;flex-shrink:0}.mode-item.active .mode-indicator{background:linear-gradient(135deg,var(--custom-primary, #ec4899),var(--custom-secondary, #8b5cf6));box-shadow:0 0 10px #ec489980}.mode-label{font-size:.85rem;font-weight:500;color:#ffffffb3;letter-spacing:1px;text-transform:uppercase;transition:color .3s ease;white-space:nowrap}.sidebar.collapsed .mode-label{opacity:0;width:0;overflow:hidden}.mode-item.active .mode-label{color:#fff}.action-btn{display:flex;align-items:center;gap:15px;padding:16px 20px;background:#ffffff08;border:1px solid rgba(255,255,255,.08);border-radius:8px;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden}.sidebar.collapsed .action-btn{padding:16px;justify-content:center}.action-btn:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(135deg,var(--custom-secondary, #8b5cf6),var(--custom-tertiary, #22d3ee));transform:scaleY(0);transition:transform .3s ease}.action-btn:hover{background:#ffffff0f;border-color:#ffffff26}.action-btn.active:before{transform:scaleY(1)}.action-btn.active{background:#8b5cf61a;border-color:#8b5cf64d}.action-line{width:20px;height:2px;background:#fff3;border-radius:1px;transition:all .3s ease;flex-shrink:0}.action-btn.active .action-line{background:linear-gradient(135deg,var(--custom-secondary, #8b5cf6),var(--custom-tertiary, #22d3ee));box-shadow:0 0 8px #8b5cf680}.action-label{font-size:.85rem;font-weight:500;color:#ffffffb3;letter-spacing:1px;text-transform:uppercase;transition:color .3s ease;white-space:nowrap}.sidebar.collapsed .action-label{opacity:0;width:0;overflow:hidden}.action-btn:hover .action-label{color:#fff}.action-btn:disabled{opacity:.4;cursor:not-allowed}.action-btn:disabled:hover{background:#ffffff08;border-color:#ffffff14}.collapse-btn{position:absolute;left:-20px;top:50%;transform:translateY(-50%);width:20px;height:60px;background:#000c;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-radius:10px 0 0 10px;cursor:pointer;transition:all .3s ease;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0;z-index:10}.collapse-btn:hover{background:#ec48994d;border-color:#ec489980}.collapse-line{width:12px;height:2px;background:#fff;border-radius:1px;transition:all .3s ease}.interface.collapsed .collapse-line:first-child{transform:rotate(90deg)}.interface.collapsed .collapse-line:last-child{transform:rotate(-90deg)}.gesture-hint{position:absolute;bottom:20px;left:20px;background:#000c;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:12px;pointer-events:auto;opacity:0;transform:translateY(20px);transition:all .3s cubic-bezier(.4,0,.2,1)}.interface.collapsed .gesture-hint{opacity:0;transform:translateY(20px);pointer-events:none}@media(max-width:768px){.gesture-hint{opacity:1;transform:translateY(0)}}.gesture-hint:hover{opacity:1;transform:translateY(0)}.gesture-close-btn{position:absolute;top:8px;right:8px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);color:#fff;width:32px;height:32px;border-radius:8px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0;touch-action:manipulation;-webkit-tap-highlight-color:rgba(236,72,153,.3)}.gesture-close-btn:hover{background:#ec48994d;border-color:#ec489966;transform:scale(1.1)}.gesture-close-btn:active{transform:scale(.95)}.gesture-close-btn .close-line{width:14px;height:2px;background:#fff;border-radius:1px;transition:transform .3s cubic-bezier(.4,0,.2,1)}.gesture-close-btn:hover .close-line:first-child{transform:rotate(45deg) translate(2px,2px)}.gesture-close-btn:hover .close-line:last-child{transform:rotate(-45deg) translate(2px,-2px)}.gesture-content{display:flex;flex-direction:column;gap:8px}.gesture-text{font-size:.65rem;color:#ffffffb3;letter-spacing:1px;margin:0;display:flex;align-items:center;gap:8px;transition:color .3s ease}.gesture-text:hover{color:#fff}.gesture-icon{font-size:.75rem;color:var(--custom-primary, #ec4899);font-weight:600}.gesture-instructions{position:absolute;bottom:30px;left:50%;transform:translate(-50%);background:#0009;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:12px 24px;pointer-events:none;opacity:.8;transition:opacity .3s ease}.gesture-instructions:hover{opacity:1}.gesture-instruction{font-size:.75rem;color:#fffc;letter-spacing:2px;margin:0;text-align:center;font-weight:500}.settings-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:400px;max-width:90vw;background:#000000e6;-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.15);border-radius:16px;padding:40px;z-index:1000;box-shadow:0 25px 80px #000c}.settings-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:35px;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:20px}.settings-header h3{margin:0;font-size:1.3rem;font-weight:700;background:linear-gradient(135deg,var(--custom-primary, #ec4899),var(--custom-secondary, #8b5cf6));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:2px;text-transform:uppercase}.close-btn{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);color:#fff;width:48px;height:48px;border-radius:12px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0;position:relative;overflow:hidden;touch-action:manipulation;-webkit-tap-highlight-color:rgba(236,72,153,.3)}.close-btn:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,var(--custom-primary, #ec4899),var(--custom-secondary, #8b5cf6));opacity:0;transition:opacity .3s ease}.close-btn:hover{background:#ec489933;border-color:#ec489966;transform:scale(1.05);box-shadow:0 0 20px #ec48994d}.close-btn:hover:before{opacity:.1}.close-btn:active{transform:scale(.95);background:#ec48994d}.close-line{width:20px;height:2px;background:#fff;border-radius:1px;transition:transform .3s cubic-bezier(.4,0,.2,1);position:relative;z-index:1}.close-btn:hover .close-line:first-child{transform:rotate(45deg) translate(3px,3px)}.close-btn:hover .close-line:last-child{transform:rotate(-45deg) translate(3px,-3px)}.close-btn:focus{outline:2px solid var(--custom-primary, #ec4899);outline-offset:2px}.close-btn:focus-visible{outline:2px solid var(--custom-primary, #ec4899);outline-offset:2px}.toggle-btn{width:100%;display:flex;align-items:center;gap:12px;padding:12px 16px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:8px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);touch-action:manipulation;-webkit-tap-highlight-color:rgba(236,72,153,.3)}.toggle-btn:hover{background:#ffffff14;border-color:#ffffff26}.toggle-btn:active{transform:scale(.98);background:#ec489926}.toggle-indicator{width:44px;height:24px;background:#fff3;border-radius:12px;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1)}.toggle-indicator:before{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;border-radius:50%;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 4px #0003}.toggle-btn[aria-checked=true] .toggle-indicator{background:linear-gradient(135deg,var(--custom-primary, #ec4899),var(--custom-secondary, #8b5cf6))}.toggle-btn[aria-checked=true] .toggle-indicator:before{transform:translate(20px)}.toggle-label{flex:1;font-size:.85rem;font-weight:500;color:#ffffffb3;text-align:left;transition:color .3s ease}.toggle-btn:hover .toggle-label{color:#ffffffe6}.settings-content{display:flex;flex-direction:column;gap:25px}.setting-group{display:flex;flex-direction:column;gap:12px}.setting-group label{font-size:.75rem;font-weight:600;color:#ffffffb3;text-transform:uppercase;letter-spacing:2px}.setting-group input[type=color]{width:100%;height:50px;border:2px solid rgba(255,255,255,.15);border-radius:8px;background:#ffffff0d;cursor:pointer;transition:all .3s ease}.setting-group input[type=color]:hover{border-color:var(--custom-primary, rgba(236, 72, 153, .6))}.setting-group input[type=range]{width:100%;height:6px;border-radius:3px;background:#ffffff1a;outline:none;-webkit-appearance:none}.setting-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,var(--custom-primary, #ec4899),var(--custom-secondary, #8b5cf6));cursor:pointer;transition:transform .3s ease}.setting-group input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}@media(max-width:1024px){.text-overlay{left:30px;right:260px}.art-title{font-size:2.2rem;letter-spacing:5px}.interface{width:240px}.sidebar{width:240px;padding:30px 20px}.mode-item,.action-btn{padding:14px 18px}.mode-label,.action-label{font-size:.8rem}}@media(max-width:768px){.text-overlay{top:5%;left:20px;right:70px}.art-title{font-size:1.6rem;letter-spacing:2px;line-height:1.3}.art-subtitle{font-size:.65rem;letter-spacing:1px}.interface{width:200px}.sidebar{width:200px;padding:25px 15px;gap:35px}.sidebar-section{gap:15px}.mode-item,.action-btn{padding:14px 16px;min-height:50px;touch-action:manipulation}.mode-label,.action-label{font-size:.75rem}.settings-panel{width:90vw;padding:20px;max-height:80vh;overflow-y:auto}.settings-content{gap:15px}.setting-group{gap:8px}.setting-group label{font-size:.75rem}.mode-item,.action-btn,.collapse-btn,.close-btn{-webkit-tap-highlight-color:rgba(236,72,153,.3);user-select:none;-webkit-user-select:none}.collapse-btn{width:24px;height:70px;left:-24px}.collapse-line{width:14px}}@media(max-width:480px){.text-overlay{top:3%;left:15px;right:60px}.art-title{font-size:1.3rem;letter-spacing:1px;line-height:1.4}.art-subtitle{font-size:.6rem;letter-spacing:.5px}.interface{width:180px}.interface.collapsed{width:60px}.sidebar{width:180px;padding:20px 12px;gap:30px}.sidebar.collapsed{width:60px;padding:20px 10px}.sidebar-section{gap:12px}.sidebar-title{font-size:.55rem;letter-spacing:2px}.mode-item,.action-btn{padding:12px 14px;min-height:48px}.sidebar.collapsed .mode-item,.sidebar.collapsed .action-btn{padding:12px}.mode-label,.action-label{font-size:.7rem}.mode-indicator,.action-line{width:7px}.collapse-btn{width:20px;height:60px;left:-20px}.collapse-line{width:12px}.settings-panel{width:95vw;padding:15px;max-height:85vh}.settings-header h3{font-size:1rem}.settings-content{gap:12px}.setting-group{gap:6px}.setting-group label{font-size:.7rem}.setting-group input[type=range]{height:5px}.setting-group input[type=color]{width:40px;height:40px}}@media(max-width:768px)and (orientation:landscape){.text-overlay{top:3%;left:20px}.art-title{font-size:1.4rem}.art-subtitle{font-size:.6rem}.sidebar{padding:20px 15px;gap:25px}.sidebar-section{gap:10px}.mode-item,.action-btn{padding:10px 14px;min-height:44px}.settings-panel{width:80vw;max-height:70vh}.gesture-instructions{bottom:20px;padding:10px 20px}.gesture-instruction{font-size:.65rem;letter-spacing:1px}}@media(hover:none)and (pointer:coarse){.mode-item,.action-btn,.collapse-btn,.close-btn{touch-action:manipulation;-webkit-tap-highlight-color:rgba(236,72,153,.3);user-select:none;-webkit-user-select:none}.mode-item:active,.action-btn:active{transform:scale(.97);background:#ec489926}.collapse-btn:active{transform:translateY(-50%) scale(.95)}.close-btn,.gesture-close-btn{min-width:48px;min-height:48px}.close-btn:active,.gesture-close-btn:active{transform:scale(.9);background:#ec489966}.mode-item,.action-btn{min-height:48px}.sidebar-section{gap:16px}.mode-item,.action-btn{transition:all .2s ease}.mode-item:active:after,.action-btn:active:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:#ec489933;border-radius:inherit;animation:touch-ripple .3s ease-out}@keyframes touch-ripple{0%{opacity:.5;transform:scale(1)}to{opacity:0;transform:scale(1.5)}}}@media(max-width:768px){.orb{filter:blur(0)}.star{will-change:transform,opacity}.wave{will-change:transform}.particle-canvas{opacity:.7}.background-noise{opacity:.02}}@media(max-width:768px){body:fullscreen .interface,body:-webkit-full-screen .interface,body:-moz-full-screen .interface,body:-ms-fullscreen .interface{width:200px}body:fullscreen .interface.collapsed,body:-webkit-full-screen .interface.collapsed,body:-moz-full-screen .interface.collapsed,body:-ms-fullscreen .interface.collapsed{width:60px;opacity:.7}body:fullscreen .interface.collapsed:hover,body:-webkit-full-screen .interface.collapsed:hover,body:-moz-full-screen .interface.collapsed:hover,body:-ms-fullscreen .interface.collapsed:hover{width:200px;opacity:1}}@supports (padding: env(safe-area-inset-bottom)){@media(max-width:768px){.sidebar,.interface.collapsed .sidebar{padding-bottom:calc(20px + env(safe-area-inset-bottom))}}}@media(max-width:768px){.settings-panel{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.settings-panel::-webkit-scrollbar{width:4px}.settings-panel::-webkit-scrollbar-track{background:#ffffff0d}.settings-panel::-webkit-scrollbar-thumb{background:#ec489980;border-radius:2px}}body:fullscreen .art-canvas{position:fixed;top:0;left:0;width:100vw;height:100vh;margin:0}body:fullscreen .interface{opacity:.9}body:fullscreen .interface.collapsed{opacity:.6;width:70px}body:fullscreen .interface.collapsed:hover{opacity:1;width:280px}body:fullscreen .sidebar{background:#000000e6}body:fullscreen .settings-panel{z-index:1000}body:-webkit-full-screen .art-canvas{position:fixed;top:0;left:0;width:100vw;height:100vh;margin:0}body:-webkit-full-screen .interface{opacity:.9}body:-webkit-full-screen .interface.collapsed{opacity:.6;width:70px}body:-webkit-full-screen .interface.collapsed:hover{opacity:1;width:280px}body:-webkit-full-screen .sidebar{background:#000000e6}body:-webkit-full-screen .settings-panel{z-index:1000}body:-moz-full-screen .art-canvas{position:fixed;top:0;left:0;width:100vw;height:100vh;margin:0}body:-moz-full-screen .interface{opacity:.9}body:-moz-full-screen .interface.collapsed{opacity:.6;width:70px}body:-moz-full-screen .interface.collapsed:hover{opacity:1;width:280px}body:-moz-full-screen .sidebar{background:#000000e6}body:-moz-full-screen .settings-panel{z-index:1000}body:-ms-fullscreen .art-canvas{position:fixed;top:0;left:0;width:100vw;height:100vh;margin:0}body:-ms-fullscreen .interface{opacity:.9}body:-ms-fullscreen .interface.collapsed{opacity:.6;width:70px}body:-ms-fullscreen .interface.collapsed:hover{opacity:1;width:280px}body:-ms-fullscreen .sidebar{background:#000000e6}body:-ms-fullscreen .settings-panel{z-index:1000}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%;overflow:hidden}body{font-family:Space Grotesk,sans-serif;background:#000;color:#fff;cursor:crosshair}