@layer components-bento{.bento-surface{border-radius:var(--bento-radius,0);box-shadow:var(--bento-shadow,none);background:var(--bento-bg,transparent);border:var(--bento-border,none);position:relative;overflow:hidden}.bento-surface>*{width:100%;height:100%}.bento-surface[data-theme=none]{--bento-radius:0;--bento-shadow:none;--bento-bg:transparent;--bento-border:none}.bento-surface[data-theme=rounded]{--bento-radius:23px;--bento-shadow:0 4px 16px #00000014}.bento-surface[data-theme=dashed]{--bento-radius:23px;--bento-border:none}.bento-surface__stroke{pointer-events:none;position:absolute;inset:0}.bento-surface[data-animation^=pointer]{--bento-tilt-x:0;--bento-tilt-y:0;--bento-tilt-max:8deg;--bento-tilt-ref:320px;--bento-tilt-perspective:1000px;--bento-tilt-effective-max:calc(var(--bento-tilt-max) * var(--bento-tilt-ref) / var(--bento-tilt-w,var(--bento-tilt-ref)));transform-style:preserve-3d;transition:transform var(--bento-tilt-rest-duration,.4s) ease-out}.bento-surface[data-animation^=pointer][data-tilt-active=true]{will-change:transform;transform:perspective(var(--bento-tilt-perspective)) rotateY(calc(var(--bento-tilt-x) * var(--bento-tilt-effective-max))) rotateX(calc(var(--bento-tilt-y) * var(--bento-tilt-effective-max) * -1));transition-duration:var(--bento-tilt-active-duration,80ms)}@media (prefers-reduced-motion:reduce){.bento-surface[data-animation^=pointer],.bento-surface[data-animation^=pointer][data-tilt-active=true]{transition:none;transform:none}}.bento-surface--popover{cursor:pointer;-webkit-user-select:none;user-select:none;transition:var(--bento-trigger-transition,transform .15s ease-out, filter .15s ease-out)}.bento-surface--popover:hover{transform:var(--bento-trigger-hover-transform,none);filter:var(--bento-trigger-hover-filter,brightness(1.05))}.bento-surface--popover:active{transform:var(--bento-trigger-active-transform,scale(.985));filter:var(--bento-trigger-active-filter,brightness(.97));transition-duration:var(--bento-trigger-active-duration,50ms)}.bento-surface--popover:focus-visible,.bento-surface--popover[data-popover-open=true]{outline:2px solid var(--bento-focus-color,#74ffd1);outline-offset:2px}.bento-surface--popover[data-popover-open=true]{outline-offset:3px;transform:var(--bento-trigger-open-transform,none);filter:var(--bento-trigger-open-filter,none);outline-width:3px}.bento-popover{left:var(--bento-popover-left,var(--bento-anchor-center-x,50%));top:var(--bento-popover-top,calc(var(--bento-anchor-top,0px) - var(--bento-popover-gap,12px)));transform:var(--bento-popover-transform,translate(-50%, -100%));min-width:var(--bento-popover-min-width,auto);max-width:var(--bento-popover-max-width,min(360px, 90vw));padding:var(--bento-popover-padding,16px);background:var(--bento-popover-bg,#fff);color:var(--bento-popover-fg,#111);border-radius:var(--bento-popover-radius,16px);box-shadow:var(--bento-popover-shadow,0 12px 32px #0000002e);z-index:var(--bento-popover-z,1000);opacity:0;visibility:hidden;transition:opacity .2s ease-out,visibility 0s linear .2s;position:fixed}.bento-popover[data-open=true]{opacity:1;visibility:visible;transition:opacity .2s ease-out,visibility linear}.bento-popover[data-direction=below]{top:var(--bento-popover-top,calc(var(--bento-anchor-bottom,0px) + var(--bento-popover-gap,12px)));transform:var(--bento-popover-transform,translate(-50%, 0))}.bento-popover[data-direction=center]{left:var(--bento-popover-left,var(--bento-anchor-left,0px));top:var(--bento-popover-top,var(--bento-anchor-top,0px));width:var(--bento-popover-width,var(--bento-anchor-width,auto));height:var(--bento-popover-height,var(--bento-anchor-height,auto));max-width:var(--bento-popover-max-width,none);transform:var(--bento-popover-transform,none)}.bento-popover__content{width:100%;height:100%}.bento-grid__inner{grid-template-columns:repeat(var(--bento-cols,3), 1fr);grid-template-rows:repeat(var(--bento-rows,2), 1fr);gap:30px;display:grid}.bento-grid[data-theme=rounded]{--bento-radius:23px;--bento-shadow:0 4px 16px #00000014}.bento-grid__box{grid-column:var(--bento-col,auto)/span var(--bento-col-span,1);grid-row:var(--bento-row,auto)/span var(--bento-row-span,1)}}