.dnd-grid-demo{--board-tone:color-mix(in oklab, var(--foreground) 5%, var(--background));--edge-rest:color-mix(in oklab, var(--foreground) 15%, transparent);--edge-hover:color-mix(in oklab, var(--foreground) 28%, transparent);--edge-held:color-mix(in oklab, var(--foreground) 40%, transparent);--dnd-grid-radius:16px;--dnd-grid-transition-duration:.22s;--dnd-grid-transition-easing:cubic-bezier(.25, 1, .5, 1);--dnd-grid-item-bg:var(--card);--dnd-grid-item-color:var(--card-foreground);--dnd-grid-item-border-color:var(--edge-rest);--dnd-grid-item-shadow:0 1px 2px #0000000f, 0 1px 1px #0000000a;--dnd-grid-item-font-size:.875rem;--dnd-grid-item-font-weight:500;--dnd-grid-placeholder-bg:color-mix(in oklab, var(--foreground) 9%, transparent);--dnd-grid-placeholder-shadow:inset 0 1px 2px color-mix(in oklab, var(--foreground) 10%, transparent);--dnd-grid-handle-size:14px;--dnd-grid-handle-bg:var(--background);--dnd-grid-handle-shadow:0 0 0 1.5px color-mix(in oklab, var(--foreground) 32%, transparent), 0 1px 3px #0000001f}@supports (color:lab(0% 0 0)){.dnd-grid-demo{--dnd-grid-item-shadow:0 1px 2px lab(0% 0 0/.06), 0 1px 1px lab(0% 0 0/.04);--dnd-grid-handle-shadow:0 0 0 1.5px color-mix(in oklab, var(--foreground) 32%, transparent), 0 1px 3px lab(0% 0 0/.12)}}.dnd-grid-board{background:var(--board-tone);border:1px solid var(--border);border-radius:32px;padding:16px}.dnd-grid-demo .dnd-grid-item-content{transition:border-color .15s,box-shadow .15s}@media (hover:hover) and (pointer:fine){.dnd-grid-demo .dnd-grid-item-content:hover{border-color:var(--edge-hover)}}.dnd-grid-demo .dnd-grid-item-content:focus-visible{outline:2px solid var(--ring);outline-offset:2px}.dnd-grid-demo .dnd-grid-item-content.dnd-draggable-dragging,.dnd-grid-demo .dnd-grid-item-content.resizing{border-color:var(--edge-held);box-shadow:0 12px 24px -8px #00000024,0 4px 8px -4px #0000001a;box-shadow:0 12px 24px -8px lab(0% 0 0/.14),0 4px 8px -4px lab(0% 0 0/.1)}.dnd-grid-skeleton{border:1px dashed var(--edge-rest);border-radius:12px;width:100%}.dnd-grid-demo .dnd-grid-item>.react-resizable-handle{transition:opacity .15s}.dnd-grid-demo .dnd-grid-item:focus-visible>.react-resizable-handle,.dnd-grid-demo .dnd-grid-item:focus-within>.react-resizable-handle{opacity:1}@media (prefers-reduced-motion:reduce){.dnd-grid-demo{--dnd-grid-transition-duration:.01ms}.dnd-grid-demo .dnd-grid-item-content,.dnd-grid-demo .dnd-grid-item>.react-resizable-handle{transition:none}}