:root{--menu-bg-start:rgba(15, 15, 20, 0.95);--menu-bg-end:rgba(25, 25, 35, 0.95);--menu-border:rgba(100, 200, 255, 0.2);--menu-hover-bg:rgba(100, 200, 255, 0.1);--menu-active-bg:rgba(100, 200, 255, 0.15)}.context-menu,.safe-menu,.safe-submenu{position:absolute;background:linear-gradient(135deg,var(--menu-bg-start) 0%,var(--menu-bg-end) 100%);border:1px solid var(--menu-border);border-radius:6px;padding:.25rem;min-width:180px;box-shadow:0 4px 12px rgba(0,0,0,.3),0 0 20px rgba(100,200,255,.05);backdrop-filter:blur(10px)}.menu-item,.safe-menu-item{padding:.5rem .75rem;color:var(--text-primary);font-size:.9rem;font-family:"General Sans",sans-serif;cursor:pointer;border-radius:4px;transition:all 150ms ease;display:flex;justify-content:space-between;align-items:center;user-select:none}.menu-item:hover,.safe-menu-item:focus,.safe-menu-item:hover{background:var(--menu-hover-bg);color:#fff;outline:0}.menu-item.active,.safe-menu-item.active{background:var(--menu-active-bg);color:#64c8ff}.submenu-arrow{font-size:.75rem;opacity:.6;transition:transform 150ms ease}.menu-item.active .submenu-arrow,.safe-menu-item.active .submenu-arrow{transform:translateX(2px);opacity:1}.canvas-enable-btn,.magnetic-button,.warp-button{padding:1rem 2rem;background:0 0;border:1px solid var(--accent-border);border-radius:8px;color:var(--text-primary);font-size:1rem;font-family:"General Sans",sans-serif;font-weight:500;cursor:pointer;transition:all .3s ease;overflow:hidden}.magnetic-button:hover,.warp-button:hover{border-color:var(--accent-border);background:var(--accent-bg)}.canvas-enable-btn{background:rgba(51,187,255,.15);backdrop-filter:blur(2px)}.canvas-enable-btn:hover{background:rgba(51,187,255,.25);border-color:rgba(51,187,255,.7);transform:scale(1.05)}.magnetic-button .button-bg,.warp-button .button-bg{position:absolute;top:50%;left:50%;width:0;height:0;background:radial-gradient(circle,rgba(51,187,255,.3)0,transparent 70%);border-radius:50%;transform:translate(-50%,-50%);transition:width .3s ease,height .3s ease;pointer-events:none}.magnetic-button:hover .button-bg,.warp-button.active .button-bg{width:200%;height:200%}#infinite-canvas,#infinite-canvas-immediate,#infinite-canvas-passthrough,#magnetic-guidelines-canvas,#repulsion-effect-canvas{width:100%;height:400px;display:block;background:0 0;cursor:default}#infinite-canvas,#infinite-canvas-immediate,#infinite-canvas-passthrough{touch-action:none}.demo-container{position:relative;margin:2rem 0;padding:3rem 2rem;background:radial-gradient(ellipse at center,rgba(100,200,255,.03)0,rgba(5,5,5,.5) 100%);border-radius:12px;border:1px solid rgba(100,200,255,.1);min-height:300px}.demo-container.canvas-demo{padding:0;overflow:hidden;min-height:400px}.demo-info,.demo-tooltip::after,.warp-info{position:absolute;left:50%;transform:translateX(-50%)}.demo-info,.warp-info{bottom:1rem;text-align:center;color:var(--text-muted);font-size:.75rem;font-family:"General Sans",sans-serif;pointer-events:none;z-index:10}.tooltip-demo-container{min-height:100px;padding:1.5rem 2rem}.tooltip-demo-wrapper{display:flex;gap:6rem;justify-content:center;align-items:center;flex-wrap:wrap}.tooltip-demo-item{position:relative;padding:1rem 2rem;background:linear-gradient(135deg,rgba(15,15,20,.9)0,rgba(25,25,35,.9) 100%);border:1px solid var(--menu-border);border-radius:8px;cursor:pointer;transition:all .2s ease;font-family:"General Sans",sans-serif;font-size:1rem;color:var(--text-primary);font-weight:500}.tooltip-demo-item.immediate{transition-delay:0ms}.tooltip-demo-item.delayed,.tooltip-demo-item.delayed:hover{transition-delay:300ms}.tooltip-demo-item:hover{background:linear-gradient(135deg,rgba(25,25,35,.95)0,rgba(35,35,45,.95) 100%);border-color:rgba(100,200,255,.4);transform:translateY(-2px);transition-delay:0ms}.demo-tooltip{position:absolute;top:calc(100% + 12px);left:50%;transform:translate(-50%,-4px);padding:.625rem 1rem;background:linear-gradient(135deg,rgba(15,15,20,.95)0,rgba(25,25,35,.95) 100%);border:1px solid rgba(100,200,255,.5);border-radius:6px;font-size:.875rem;color:rgba(255,255,255,.9);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 180ms ease,transform 180ms ease;box-shadow:0 4px 16px rgba(0,0,0,.4),0 0 30px rgba(100,200,255,.1);z-index:100}.demo-tooltip::after{content:"";bottom:100%;border:7px solid transparent;border-bottom-color:rgba(100,200,255,.5)}.tooltip-demo-item.delayed .demo-tooltip,.tooltip-demo-item.immediate .demo-tooltip{transition-delay:0ms}.tooltip-demo-item.immediate:hover .demo-tooltip{opacity:1;transform:translate(-50%,0);transition-delay:0ms}.tooltip-demo-item.delayed:hover .demo-tooltip{opacity:1;transform:translate(-50%,0);transition-delay:300ms}.sticky-notes-wrapper{display:flex;gap:2rem;justify-content:center;flex-wrap:wrap}.sticky-note{position:relative;width:200px;min-height:180px;padding:1.5rem;background:linear-gradient(135deg,rgba(15,15,20,.9)0,rgba(25,25,35,.9) 100%);border:1px solid var(--menu-border);border-radius:8px;transition:all .3s ease;cursor:pointer;overflow:hidden}.sticky-note:nth-child(2){background:linear-gradient(135deg,rgba(20,15,25,.9)0,rgba(35,25,40,.9) 100%)}.note-glow{position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at center,rgba(100,200,255,.1)0,transparent 70%);opacity:0;transition:opacity .3s ease;pointer-events:none}.sticky-note.active{transform:translateY(-4px) scale(1.05);border-color:rgba(100,200,255,.6);background:linear-gradient(135deg,rgba(25,25,35,.95)0,rgba(40,40,55,.95) 100%);box-shadow:0 8px 24px rgba(0,0,0,.4),0 0 40px rgba(100,200,255,.15)}.sticky-note:nth-child(2).active{background:linear-gradient(135deg,rgba(30,25,40,.95)0,rgba(50,40,60,.95) 100%)}.sticky-note.active .note-glow{opacity:1}.canvas-sticky-note.active h4,.sticky-note.active h4{color:#64c8ff}.sticky-note.active p{color:rgba(255,255,255,.85)}.sticky-note h4,.sticky-note p{font-family:"General Sans",sans-serif}.sticky-note h4{margin:0 0 1rem;font-size:1rem;font-weight:600;color:rgba(100,200,255,.9)}.sticky-note p{margin:0;font-size:.85rem;line-height:1.5;color:var(--text-muted)}.canvas-overlay{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px);background:rgba(0,0,0,.3);z-index:100;opacity:1;transition:opacity .3s ease}.canvas-demo.canvas-enabled .canvas-overlay{opacity:0;pointer-events:none}.canvas-demo:not(.canvas-enabled) #infinite-canvas,.canvas-demo:not(.canvas-enabled) #infinite-canvas-immediate,.canvas-demo:not(.canvas-enabled) #infinite-canvas-passthrough{filter:blur(2px);opacity:.5}.canvas-info{position:absolute;bottom:1rem;right:1rem;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);padding:.5rem .75rem;border-radius:6px;border:1px solid rgba(255,255,255,.1);z-index:10;display:flex;align-items:center;gap:1rem;font-size:.75rem;color:rgba(255,255,255,.7)}.canvas-reset-btn{padding:.25rem .5rem;background:var(--accent-bg);border:1px solid var(--accent-border);border-radius:6px;color:var(--text-primary);font-size:.7rem;font-weight:500;font-family:"General Sans",sans-serif;cursor:pointer;transition:all .2s ease}.canvas-reset-btn:hover{background:rgba(51,187,255,.2);border-color:var(--accent-border);color:#fff}.canvas-info span span{color:var(--accent-primary);font-weight:600}.passthrough-note{pointer-events:none}.canvas-sticky-note{position:absolute;width:180px;height:150px;padding:1rem;overscroll-behavior:contain;background:linear-gradient(135deg,rgba(15,15,20,.9)0,rgba(25,25,35,.9) 100%);border:1px solid var(--menu-border);border-radius:8px;transition:transform .3s ease,border-color .3s ease,background .3s ease,box-shadow .3s ease,opacity .2s ease;cursor:default;overflow-y:scroll;overflow-x:hidden;scrollbar-gutter:stable;display:block;resize:none;color:var(--text-muted);font-family:"General Sans",sans-serif;font-size:.75rem;line-height:1.4;z-index:5;background-clip:padding-box;outline:0;box-sizing:border-box}.canvas-sticky-note::-webkit-scrollbar{width:8px;height:8px}.canvas-sticky-note::-webkit-scrollbar-track{background:rgba(0,0,0,.2);border-radius:4px}.canvas-sticky-note::-webkit-scrollbar-thumb{background:rgba(100,200,255,.4);border-radius:4px}.canvas-sticky-note::-webkit-scrollbar-thumb:hover{background:rgba(100,200,255,.6)}.canvas-sticky-note::-webkit-scrollbar-corner{background:0 0}.canvas-sticky-note:nth-of-type(odd){background:linear-gradient(135deg,rgba(20,15,25,.9)0,rgba(35,25,40,.9) 100%)}.canvas-sticky-note textarea::-webkit-scrollbar{width:6px}.canvas-sticky-note textarea::-webkit-scrollbar-track{background:rgba(0,0,0,.2);border-radius:3px}.canvas-sticky-note textarea::-webkit-scrollbar-thumb{background:rgba(100,200,255,.3);border-radius:3px}.canvas-sticky-note textarea::-webkit-scrollbar-thumb:hover{background:rgba(100,200,255,.5)}.canvas-sticky-note.active{transform:scale(1.05);border-color:rgba(100,200,255,.6);background:linear-gradient(135deg,rgba(25,25,35,.95)0,rgba(40,40,55,.95) 100%);box-shadow:0 8px 24px rgba(0,0,0,.4),0 0 40px rgba(100,200,255,.15);z-index:10;pointer-events:auto;color:rgba(255,255,255,.85)}.canvas-sticky-note:nth-child(odd).active{background:linear-gradient(135deg,rgba(30,25,40,.95)0,rgba(50,40,60,.95) 100%)}.canvas-sticky-note.active .note-glow{opacity:1}.canvas-sticky-note.hover{transform:scale(1.02);border-color:rgba(100,200,255,.4);box-shadow:0 4px 16px rgba(0,0,0,.3)}.canvas-sticky-note.hover .note-glow{opacity:.5}.magnetic-container,.safe-triangles-demo-container{display:flex;justify-content:center;align-items:center}.safe-triangles-demo-container{min-height:400px}.magnetic-container{min-height:200px}.magnetic-buttons-wrapper{display:flex;justify-content:center;align-items:center}.magnetic-button{position:relative;transform-style:preserve-3d;will-change:transform}.magnetic-button.primary{border-color:var(--accent-border);background:linear-gradient(135deg,var(--accent-bg) 0%,rgba(51,187,255,.05) 100%)}.magnetic-button.large{padding:1.25rem 2.5rem;font-size:1.125rem}.button-text{position:relative;z-index:2;pointer-events:none;transition:transform .1s ease-out;display:inline-block}.magnetic-button.active{border-color:rgba(51,187,255,.8)}.warp-field-container{padding:4rem 2rem;min-height:300px;cursor:none}#warp-field-canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:100}.warp-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);cursor:none;z-index:10}.magnetic-guidelines-container,.repulsion-effect-container{padding:0;min-height:400px}.context-menu-wrapper,.safe-triangles-container{position:relative;width:580px;height:300px}.safe-triangles-container{margin:0 auto}#main-menu,.safe-menu{left:0;top:0}#edit-submenu,#submenu-3{left:190px;top:0}#submenu-4,#view-submenu{left:190px;top:40px}#find-submenu,#submenu-5{left:190px;top:80px}.safe-submenu{display:none;opacity:0;transform:translateX(-5px);transition:all 200ms ease}.safe-submenu.active{display:block;opacity:1;transform:translateX(0)}.safe-menu-item:focus-visible{box-shadow:0 0 0 2px rgba(100,200,255,.5)}.safe-triangle-svg{transition:opacity .3s ease}#safe-triangle-path{transition:d .15s ease,opacity .15s ease}@media (max-width:640px){.demo-container{padding:2rem 1rem;min-height:250px}.demo-container.canvas-demo{min-height:350px}.sticky-notes-container{gap:1.5rem}.sticky-note{width:160px;min-height:160px;padding:1rem}.canvas-info{top:.75rem;right:.75rem;padding:.4rem .6rem;gap:1rem;font-size:.7rem}.canvas-sticky-note{width:140px;height:120px;padding:.75rem}.canvas-sticky-note h4{font-size:.8rem}.canvas-sticky-note textarea{font-size:.7rem}.magnetic-buttons-demo-container{padding:2.5rem 1.5rem;min-height:180px}.magnetic-button{padding:.875rem 1.75rem;font-size:.9rem}.warp-field-container{padding:3rem 1.5rem;min-height:250px}.magnetic-guidelines-container,.repulsion-effect-container{min-height:350px}#magnetic-guidelines-canvas,#repulsion-effect-canvas{height:350px}.safe-triangles-demo-container{padding:2rem 1rem;min-height:450px}.context-menu-wrapper,.safe-triangles-container{width:100%;max-width:580px;transform-origin:center}.safe-triangles-container{transform:scale(.85)}.context-menu-wrapper{height:350px;transform:scale(.8)}.context-menu{min-width:150px}.menu-item{font-size:.8rem;padding:.4rem .6rem}.tooltip-demo-container{min-height:130px;padding:1.5rem 1rem}.tooltip-demo-wrapper{gap:3rem;flex-direction:column}.tooltip-demo-item{padding:.875rem 1.5rem;font-size:.9rem}.demo-tooltip{font-size:.8rem;padding:.5rem .75rem;white-space:normal;max-width:180px}}