.drag-grid{position:relative}
.drag-grid-stage{--tile:200px;position:relative;height:560px;overflow:hidden;border-radius:28px;background:#070b12;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;outline:none}
.drag-grid-stage.is-dragging{cursor:grabbing}
.drag-grid-stage:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.drag-grid-stage::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 80px 30px #070b12}
.drag-grid-layer{position:absolute;inset:0}
.drag-grid-tile{position:absolute;top:0;left:0;width:var(--tile);height:var(--tile);margin:0;overflow:hidden;border-radius:14px;background:linear-gradient(145deg,#1a2433,#243247);will-change:transform}
.drag-grid-tile img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;transition:transform .4s ease}
.drag-grid-tile img:not([src]){visibility:hidden}
.drag-grid-stage:not(.is-dragging) .drag-grid-tile:hover img{transform:scale(1.05)}
.drag-grid-hint{position:absolute;left:50%;bottom:22px;z-index:1;transform:translateX(-50%);margin:0;padding:10px 16px;border-radius:999px;background:#0a0f17cc;color:#d7e4f2;font-size:.78rem;white-space:nowrap;pointer-events:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.drag-grid-hint code{color:white;font-size:.74rem}
@media(max-width:600px){
  .drag-grid-stage{height:400px;border-radius:20px}
  .drag-grid-stage::after{box-shadow:inset 0 0 50px 18px #070b12}
  .drag-grid-hint{white-space:normal;width:calc(100% - 32px);text-align:center}
}