: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);--demo-container-bg:radial-gradient(
    ellipse at center,
    rgba(100, 200, 255, 0.03) 0%,
    rgba(5, 5, 5, 0.5) 100%
  );--demo-container-border:rgba(100, 200, 255, 0.1);--sticky-note-bg-1:linear-gradient(135deg, rgba(15, 15, 20, 0.9) 0%, rgba(25, 25, 35, 0.9) 100%);--sticky-note-bg-2:linear-gradient(135deg, rgba(20, 15, 25, 0.9) 0%, rgba(35, 25, 40, 0.9) 100%);--canvas-info-bg:rgba(0, 0, 0, 0.6);--canvas-overlay-bg:rgba(0, 0, 0, 0.3)}:root.light{--menu-bg-start:rgba(253, 253, 253, 0.98);--menu-bg-end:rgba(248, 250, 252, 0.98);--menu-border:#CBD5E0;--menu-hover-bg:rgba(49, 130, 206, 0.08);--menu-active-bg:rgba(49, 130, 206, 0.12);--demo-container-bg:radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(225, 232, 240, 0.4) 100%
  );--demo-container-border:#CBD5E0;--sticky-note-bg-1:#FDFDFD;--sticky-note-bg-2:#F8FAFC;--canvas-info-bg:rgba(255, 255, 255, 0.85);--canvas-overlay-bg:rgba(240, 244, 248, 0.4)}.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)}:root.light .context-menu,:root.light .safe-menu,:root.light .safe-submenu{box-shadow:0 10px 25px -5px rgba(0,0,0,.05),0 8px 10px -6px rgba(0,0,0,.05);backdrop-filter:none}.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:var(--text-primary);outline:0}.menu-item.active,.safe-menu-item.active{background:var(--menu-active-bg);color:var(--accent-primary)}.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,172,255,.15);backdrop-filter:blur(2px)}:root.light .canvas-enable-btn{background:var(--surface-primary);border-color:#cbd5e0;box-shadow:0 4px 12px rgba(0,0,0,.05);backdrop-filter:none}.canvas-enable-btn:hover{background:rgba(51,172,255,.25);border-color:rgba(51,172,255,.7);transform:scale(1.05)}:root.light .canvas-enable-btn:hover{background:var(--surface-secondary);border-color:var(--accent-primary)}.magnetic-button .button-bg,.warp-button .button-bg{position:absolute;top:50%;left:50%;width:0;height:0;background:radial-gradient(circle,rgba(51,172,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{width:100%;height:400px;display:block;background:0 0;cursor:default;touch-action:none}.demo-container{position:relative;margin:2rem 0;padding:3rem 2rem;background:var(--demo-container-bg);border-radius:12px;border:1px solid var(--demo-container-border);min-height:300px}.demo-container.canvas-demo{padding:0;overflow:hidden;min-height:400px}.demo-info,.warp-info{position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);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:var(--sticky-note-bg-1);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}:root.light .tooltip-demo-item{box-shadow:0 4px 12px rgba(0,0,0,.05)}.tooltip-demo-item.immediate{transition-delay:0ms}.tooltip-demo-item.delayed,.tooltip-demo-item.delayed:hover{transition-delay:300ms}.tooltip-demo-item:hover{border-color:rgba(100,200,255,.4);transform:translateY(-2px);transition-delay:0ms}:root.light .tooltip-demo-item:hover{background:var(--surface-secondary);border-color:var(--accent-primary);box-shadow:0 8px 24px rgba(0,0,0,.08)}.demo-tooltip{position:absolute;top:calc(100% + 12px);left:50%;transform:translate(-50%,-4px);padding:.625rem 1rem;background:var(--menu-bg-start);border:1px solid var(--accent-border);border-radius:6px;font-size:.875rem;color:var(--text-primary);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}:root.light .demo-tooltip{box-shadow:0 10px 25px -5px rgba(0,0,0,.1);background:var(--surface-primary);border-color:var(--menu-border)}.demo-tooltip::after{content:"";position:absolute;bottom:100%;left:50%;transform:translateX(-50%);border:7px solid transparent;border-bottom-color:var(--accent-border)}:root.light .demo-tooltip::after{border-bottom-color:var(--menu-border)}.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:var(--sticky-note-bg-1);border:1px solid var(--menu-border);border-radius:8px;transition:all .3s ease;cursor:pointer;overflow:hidden}.sticky-note:nth-child(2){background:var(--sticky-note-bg-2)}:root.light .sticky-note{box-shadow:0 4px 12px rgba(0,0,0,.05)}.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:var(--sticky-note-bg-1);box-shadow:0 8px 24px rgba(0,0,0,.4),0 0 40px rgba(100,200,255,.15)}:root.light .sticky-note.active{background:var(--surface-secondary);border-color:var(--accent-primary);box-shadow:0 12px 28px rgba(0,0,0,.08)}.sticky-note:nth-child(2).active{background:var(--sticky-note-bg-2)}:root.light .sticky-note:nth-child(2).active{background:var(--surface-secondary)}.sticky-note.active .note-glow{opacity:1}.canvas-sticky-note.active h4,.sticky-note.active h4{color:var(--accent-primary)}.sticky-note.active p{color:var(--text-primary)}.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:var(--accent-primary)}.sticky-note p{margin:0;font-size:.85rem;line-height:1.5;color:var(--text-secondary)}.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:var(--canvas-overlay-bg);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:var(--canvas-info-bg);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:var(--text-secondary)}:root.light .canvas-info{border-color:#cbd5e0;box-shadow:0 4px 12px rgba(0,0,0,.05);backdrop-filter:none}.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,172,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:var(--sticky-note-bg-1);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-secondary);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}:root.light .canvas-sticky-note{box-shadow:0 4px 12px rgba(0,0,0,.05)}.canvas-sticky-note::-webkit-scrollbar{width:8px;height:8px}.canvas-sticky-note::-webkit-scrollbar-track{background:rgba(0,0,0,.1);border-radius:4px}.canvas-sticky-note::-webkit-scrollbar-thumb{background:var(--accent-bg-dark);border-radius:4px}.canvas-sticky-note::-webkit-scrollbar-thumb:hover{background:var(--accent-border)}.canvas-sticky-note::-webkit-scrollbar-corner{background:0 0}.canvas-sticky-note:nth-of-type(odd){background:var(--sticky-note-bg-2)}.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:var(--accent-primary);background:var(--sticky-note-bg-1);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:var(--text-primary)}:root.light .canvas-sticky-note.active{background:var(--surface-primary);box-shadow:0 12px 28px rgba(0,0,0,.08)}.canvas-sticky-note:nth-child(odd).active{background:var(--sticky-note-bg-2)}:root.light .canvas-sticky-note:nth-child(odd).active{background:var(--surface-primary)}.canvas-sticky-note.active .note-glow{opacity:1}.canvas-sticky-note.hover{transform:scale(1.02);border-color:var(--accent-border);box-shadow:0 4px 16px rgba(0,0,0,.2)}.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,172,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,172,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;width:100%;box-sizing:border-box}#magnetic-guidelines-canvas,#repulsion-effect-canvas{width:100%;height:400px;display:block;background:0 0;cursor:default;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges}.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}}