.interactive-bento-gallery{--bento-radius:16px;margin-top:64px}.bento-heading{justify-content:space-between;align-items:end;gap:24px;display:flex}.bento-heading h2{font-size:1.8rem}.bento-heading p{color:var(--muted);margin-top:10px;font-size:.85rem}.bento-count{font:.7rem var(--font-geist-mono), monospace;color:var(--muted);flex-shrink:0}.bento-instructions{color:var(--muted);margin:20px 0;font-size:.75rem}.bento-grid{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:clamp(90px,8vw,120px);grid-auto-flow:dense;gap:16px;display:grid}.bento-tile{grid-column:span var(--bento-columns,3);grid-row:span var(--bento-rows,2);border-radius:var(--bento-radius);background:var(--surface);border:1px solid var(--border);isolation:isolate;min-width:0;position:relative}.bento-tile[data-featured]{grid-area:span 3/span 4}.bento-grid[data-count="5"] .bento-tile:not([data-featured]){--bento-columns:2;--bento-rows:3}.bento-tile-portrait,.bento-tile.full-page-capture{grid-area:span 3/span 2}.bento-grid[data-count="1"] .bento-tile{grid-column:1/-1}.bento-grid[data-count="2"] .bento-tile:not(.bento-tile-portrait){grid-row:span 3}.bento-grid[data-count="2"] .bento-tile:not([data-featured]):not(.bento-tile-portrait){grid-column:span 2}.bento-tile-open{border-radius:inherit;background:var(--surface);text-align:left;cursor:zoom-in;border:0;width:100%;height:100%;padding:0;display:block;position:absolute;inset:0;overflow:hidden}.bento-tile-open:focus-visible{outline:3px solid var(--accent);outline-offset:5px}.bento-tile-image{object-fit:cover;object-position:top;width:100%;height:100%;transition:transform .5s;display:block}.bento-tile-open:hover .bento-tile-image{transform:scale(1.025)}.bento-tile-caption{color:#f8fafc;pointer-events:none;background:linear-gradient(#0000,#020617eb 65%);flex-direction:column;gap:5px;padding:50px 20px 18px;display:flex;position:absolute;inset:auto 0 0}.bento-tile-title{text-wrap:balance;font-size:.9rem;font-weight:550}.bento-tile-description{color:#e2e8f0;font-size:.65rem}.bento-expand,.bento-drag-handle{color:#fff;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#020617c2;border:1px solid #ffffff4d;border-radius:10px;place-items:center;width:40px;height:40px;display:grid;position:absolute;top:12px}.bento-expand{pointer-events:none;right:12px}.bento-drag-handle{cursor:grab;touch-action:none;left:12px}.bento-drag-handle:active{cursor:grabbing}.bento-drag-handle:hover{background:#0f172a}.bento-dialog{border:1px solid var(--border);background:var(--background);width:min(1440px,100% - 40px);max-width:none;height:min(1000px,100dvh - 40px);max-height:none;color:var(--foreground);border-radius:20px;margin:auto;padding:0;position:fixed;inset:0;overflow:hidden;box-shadow:0 30px 100px #0006}.bento-dialog::backdrop{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#020617d1}.bento-dialog-toolbar{border-bottom:1px solid var(--border);background:var(--background);justify-content:space-between;align-items:center;gap:20px;min-height:78px;padding:14px 22px;display:flex}.bento-dialog-toolbar>div:first-child{flex-direction:column;gap:3px;min-width:0;display:flex}.bento-dialog-toolbar strong{font-size:.9rem;font-weight:550}.bento-dialog-toolbar span{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-size:.7rem;overflow:hidden}.bento-dialog-actions{flex-shrink:0;gap:8px;display:flex}.bento-dialog-actions button{border:1px solid var(--border);background:var(--surface);border-radius:10px;place-items:center;width:40px;height:40px;display:grid}.bento-dialog-actions button:hover{background:var(--surface-raised)}.bento-preview-stage{height:calc(100% - 78px);padding:20px 24px 132px}.bento-preview{flex-direction:column;gap:16px;height:100%;display:flex}.bento-preview-image{background:var(--surface);overscroll-behavior:contain;border-radius:12px;flex:1;justify-content:center;align-items:center;min-height:0;display:flex;overflow:auto}.bento-preview-image img{object-fit:contain;width:auto;max-width:100%;height:auto;max-height:100%}.bento-preview-image.bento-preview-full{display:block}.bento-preview-full img{width:100%;max-height:none;display:block}.bento-preview figcaption{flex-shrink:0;justify-content:space-between;align-items:center;gap:20px;display:flex}.bento-preview figcaption h3{font-size:1rem;font-weight:550}.bento-preview figcaption p{color:var(--muted);margin-top:6px;font-size:.7rem}.bento-preview-links{flex-shrink:0;gap:16px;display:flex}.bento-preview-links a{align-items:center;gap:6px;min-height:32px;font-size:.72rem;display:inline-flex}.bento-preview-links a:hover{color:var(--accent)}.bento-dock-boundary{pointer-events:none;position:absolute;inset:96px 16px 16px}.bento-dock{pointer-events:auto;border:1px solid var(--border);background:color-mix(in srgb, var(--surface-raised) 85%, transparent);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border-radius:16px;max-width:100%;position:absolute;bottom:0;left:50%;translate:-50%;box-shadow:0 12px 35px #02061733}.bento-dock-grip{width:100%;height:24px;color:var(--muted);cursor:grab;touch-action:none;background:0 0;border:0;place-items:center;padding:0;display:grid}.bento-dock-grip:active{cursor:grabbing}.bento-dock-items{align-items:center;gap:6px;max-width:100%;padding:14px 18px 12px;display:flex;overflow:auto hidden}.bento-thumbnail{border:2px solid var(--border);background:var(--surface);border-radius:9px;flex-shrink:0;width:64px;height:50px;padding:0;position:relative}.bento-thumbnail img{object-fit:cover;object-position:top;border-radius:6px;width:100%;height:100%;display:block}.bento-thumbnail[aria-pressed=true]{border-color:var(--accent);box-shadow:0 6px 15px #02061733}@media (max-width:900px){.bento-grid{grid-auto-rows:90px;gap:12px}.bento-tile-caption{padding:40px 14px 14px}.bento-tile-title{font-size:.8rem}.bento-preview figcaption{flex-direction:column;align-items:start;gap:6px}}@media (max-width:600px){.interactive-bento-gallery{margin-top:40px}.bento-heading{align-items:start;gap:12px}.bento-heading h2{font-size:1.6rem}.bento-heading p{font-size:.78rem}.bento-count{margin-top:7px;font-size:.6rem}.bento-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:100px}.bento-tile,.bento-tile[data-featured],.bento-tile.full-page-capture,.bento-grid[data-count="2"] .bento-tile:not([data-featured]):not(.bento-tile-portrait){grid-area:span 2/1/auto/-1}.bento-tile-portrait{grid-area:span 3/span 1}.bento-grid[data-count="1"] .bento-tile-portrait{grid-row:span 4;justify-self:center;width:100%;max-width:300px}.bento-instructions{font-size:.7rem}.bento-tile-description{font-size:.6rem}.bento-dialog{border:0;border-radius:0;width:100%;height:100dvh}.bento-dialog-toolbar{flex-wrap:wrap;gap:8px;min-height:100px;padding:12px 16px}.bento-dialog-toolbar>div:first-child{flex:100%}.bento-dialog-actions{margin-left:auto}.bento-dialog-actions button{height:36px}.bento-preview-stage{height:calc(100% - 118px);padding:12px 12px calc(128px + env(safe-area-inset-bottom))}.bento-preview{gap:12px}.bento-preview figcaption{padding-inline:4px}.bento-preview figcaption h3{font-size:.88rem}.bento-dock-boundary{inset:140px 12px calc(12px + env(safe-area-inset-bottom))}.bento-thumbnail{width:48px;height:48px}.bento-dock-items{gap:4px;padding-inline:12px}}@media (prefers-reduced-motion:reduce){.interactive-bento-gallery *,.bento-dialog *{scroll-behavior:auto;transition-duration:0s!important}}
