.labs-page{background:#fff;color:#111}
.labs-page .nav{background:#fffd}
.labs-intro{padding-block:clamp(36px,9vh,110px) 38px}
.labs-intro h1{font:500 clamp(31px,3vw,48px)/1 Switzer,Arial,sans-serif;letter-spacing:-.05em}
.labs-intro p{margin-top:12px;max-width:40ch}
.labs .lab-grid{margin-bottom:48px}
.labs .lab-grid img{aspect-ratio:1;object-fit:cover}
.labs-enhanced{overflow:hidden}
.labs-enhanced .nav{position:fixed;inset:0 0 auto}
.labs-enhanced .labs-intro{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%)
}
.labs-viewport{position:fixed;inset:0;overflow:hidden;touch-action:none;cursor:grab;background:#fff}
.labs-viewport.is-dragging{cursor:grabbing}
.labs-viewport:focus-visible{outline-offset:-5px}
.labs-world{position:absolute;inset:0;transform-origin:center}
.labs-tile{
  position:absolute;display:grid;place-items:center;padding:0;background:none;border:0;
  cursor:pointer;transform:translate(-50%,-50%);width:var(--tile-size);height:var(--tile-size)
}
.labs-tile img{
  width:auto;height:auto;max-width:100%;max-height:100%;pointer-events:none;
  transform:perspective(280px) rotateY(var(--angle-y)) rotateX(var(--angle-x));
  transition:transform .32s cubic-bezier(.22,1,.36,1)
}
.labs-tile:is(:hover,:focus-visible){z-index:1}
.labs-tile:is(:hover,:focus-visible) img{transform:perspective(280px) rotateY(0) rotateX(0) scale(1.12)}
.labs-controls{
  position:fixed;inset:auto 0 0;z-index:2;display:flex;justify-content:space-between;
  align-items:center;gap:12px;padding:8px var(--layout-edge);
  pointer-events:none;color:#555;font:500 11px/1.25 Archivo,Arial,sans-serif
}
.labs-controls>p{padding:5px 7px;background:#fffe}
.labs-controls>div{display:flex;gap:3px;pointer-events:auto}
.labs-controls button,.lab-dialog button{
  cursor:pointer;border:0;background:#f0f0f0;color:#111;
  min-width:32px;min-height:32px;padding:4px 8px
}
.labs-controls button:hover,.lab-dialog button:hover{background:#ddd}
.labs-opening{display:none;position:absolute;inset:0;place-items:center;pointer-events:none}
.labs-opening img{
  grid-area:1/1;width:min(28vw,275px);height:min(36vh,340px);object-fit:cover;
  transform:translate(var(--shift),var(--shift)) scale(var(--size))
}
@media(prefers-reduced-motion:no-preference){
  .labs-viewport.is-opening .labs-opening{display:grid;animation:labs-opening-out 2.65s both}
  .labs-viewport.is-opening .labs-opening img{animation:labs-opening-image .52s var(--delay) both}
  .labs-viewport.is-opening .labs-world{animation:labs-world-in 2.85s cubic-bezier(.22,1,.36,1) both}
  @keyframes labs-opening-image{from{opacity:0;scale:.65}to{opacity:1;scale:1}}
  @keyframes labs-opening-out{0%,65%{opacity:1}100%{opacity:0}}
  @keyframes labs-world-in{0%,54%{opacity:0;transform:scale(.28)}100%{opacity:1;transform:scale(1)}}
}
.lab-dialog{
  width:100vw;height:100dvh;max-height:none;max-width:none;
  padding:0;border:0;background:transparent;color:#111
}
.lab-dialog[open]{display:grid;grid-template-rows:minmax(0,1fr)}
.lab-dialog::backdrop{background:#ffffffe6}
.lab-dialog-bar{
  position:absolute;inset:0 0 auto;z-index:1;display:flex;
  align-items:center;justify-content:space-between;gap:12px;
  padding:8px var(--layout-edge);pointer-events:none
}
.lab-dialog-bar h2{font:500 12px Archivo,Arial,sans-serif}
.lab-dialog-bar button{pointer-events:auto}
.lab-dialog-media{display:grid;place-items:center;min-width:0;min-height:0;padding:48px var(--pad) 14px}
.lab-dialog-media :is(img,video){width:100%;height:100%;min-width:0;min-height:0;object-fit:contain}
@media(prefers-reduced-motion:no-preference){
  .lab-dialog[open] .lab-dialog-media{animation:labs-view-in .38s cubic-bezier(.22,1,.36,1) both}
  @keyframes labs-view-in{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
}
@media(max-width:620px){
  .labs-controls{font-size:10px}
  .labs-opening img{width:38vw;height:30vh}
}
@media(prefers-reduced-motion:reduce){.labs-tile img{transition:none}}