.template-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:52px;
  grid-auto-flow:dense;
  gap:12px;
}
.template-card{
  --card-span:8;
  grid-column:span 4;
  grid-row:span var(--card-span);
  isolation:isolate;
}
.template-card:nth-child(2),.template-card:nth-child(5){grid-row:span var(--card-span)}
.template-card canvas{transition:transform .75s cubic-bezier(.2,.8,.2,1),filter .45s ease}
.template-card:hover canvas{transform:scale(1.025);filter:saturate(1.08)}
.template-card:after{z-index:1;inset:42% 0 0;pointer-events:none}
.template-meta{z-index:3}
.template-meta>div>span{max-width:260px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.template-meta h3{font-size:18px;margin:7px 0 4px}
.motion-proof{
  position:absolute;
  z-index:4;
  top:12px;
  right:12px;
  display:flex;
  align-items:center;
  gap:8px;
  transform:translateY(-8px);
  opacity:0;
  transition:.3s ease;
  background:#0a0b0ac7;
  border:1px solid #ffffff30;
  border-radius:20px;
  padding:7px 9px;
  backdrop-filter:blur(8px);
}
.motion-proof span{font:700 6px monospace;color:var(--lime)}
.motion-proof b{font:700 6px monospace;color:#fff;letter-spacing:.08em}
.template-card:hover .motion-proof,.template-card.is-playing .motion-proof{opacity:1;transform:translateY(0)}
.hero-live.is-playing canvas,.lab-grid a.is-playing canvas{filter:saturate(1.08)}
@media(max-width:1050px){.template-card{grid-column:span 6}}
@media(max-width:650px){
  .template-grid{display:grid;grid-template-columns:1fr;grid-auto-rows:auto}
  .template-card,.template-card:nth-child(2),.template-card:nth-child(5){grid-column:auto;grid-row:auto;min-height:410px}
}