.dg-hero {
      position: absolute;
      inset: 0;
      overflow: hidden;
      cursor: grab;
      touch-action: none;
      -webkit-touch-callout: none;
    }

    .dg-hero.dragging { cursor: grabbing; }

    .dg-grid {
      position: absolute;
      inset: 0;
      will-change: transform;
    }

    .dg-tile {
      position: absolute;
      top: 0;
      left: 0;
      overflow: hidden;
      border-radius: 6px;
      background: #fff;
      will-change: transform;
      contain: layout paint size style;
    }

    .dg-tile img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      -webkit-user-drag: none;
      pointer-events: none;
    }

    /* Entrance: tiles created on first render fade in and settle, delayed per tile
       (--enter-delay) so the wave sweeps from top-left to bottom-right. */
    .dg-tile.entering { background: transparent; }

    .dg-tile.entering img {
      opacity: 0;
      transform: translateY(-22px);
      transition:
        opacity 4000ms cubic-bezier(0.2, 0.7, 0.2, 1) var(--enter-delay, 0ms),
        transform 4200ms cubic-bezier(0.2, 0.7, 0.2, 1) var(--enter-delay, 0ms);
    }

    .dg-tile.entering.entered img {
      opacity: 1;
      transform: translateY(0);
    }

    @media (prefers-reduced-motion: reduce) {
      .dg-tile.entering img {
        transition-duration: 1ms;
        transition-delay: 0ms;
      }
    }
  
.dg-hero{outline-offset:-3px}.dg-tile{cursor:pointer;border:0;padding:0}.dg-tile:focus-visible{outline:2px solid #efeee8;outline-offset:3px}.dg-tile img{object-fit:cover;background:#fff}.dg-view{position:absolute;inset:0;margin:0;width:100%;height:100%;max-width:none;max-height:none;border:0;background:#0d0d0c;color:#efeee8;padding:12px;z-index:10;overflow:hidden}.dg-view[open]{display:flex;flex-direction:column;gap:8px;animation:pg-enter .24s ease both}.dg-view-stage{min-height:0;flex:1;display:grid;place-items:center}.dg-view-stage img,.dg-view-stage video{width:100%;height:100%;object-fit:contain;min-height:0}.dg-view-tools{display:flex;align-items:center;gap:10px;flex-shrink:0}.dg-view button{height:44px;min-width:44px;border:1px solid #ffffff40;color:inherit;background:transparent;font:11px InterTight;cursor:pointer}.dg-view [data-close]{margin-left:auto}.dg-view output{font:11px InterTight}.dg-instructions{font:11px InterTight;min-height:32px;display:flex;align-items:center;color:#aaa}.dg-hero:not(.dragging) .dg-tile:hover img{filter:brightness(1.12);transition:filter .18s ease}

.dg-hero{background:#fff}