[data-infinite-gallery] {
  --surface-1: rgb(255, 255, 255);
  --surface-2: rgb(243, 242, 241);
  --surface-2-65: rgba(239, 238, 235, 0.65);
  --text-1: rgb(15, 15, 15);
  --focus-ring-color: rgb(224, 101, 0);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --ease-dropdown: linear(0, 0.005, 0.02 2.1%, 0.081 4.7%, 0.467 15.7%, 0.563, 0.645, 0.717, 0.778 28.5%, 0.829 32%, 0.872 35.8%, 0.909 40.1%, 0.938 44.9%, 0.961 50.3%, 0.977 56.5%, 0.987 63.6%, 0.994 72.3%, 1);
}
@media (prefers-color-scheme: dark) {
  [data-infinite-gallery] {
    --surface-1: rgb(12, 10, 9);
    --surface-2: rgb(32, 30, 29);
    --surface-2-65: rgba(32, 30, 29, 0.65);
    --text-1: rgb(245, 245, 244);
    --focus-ring-color: rgb(242, 85, 0);
  }
}
[data-infinite-gallery] {
  position: relative;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: var(--surface-1);
  color: var(--text-1);
  touch-action: pan-y pinch-zoom;
  overscroll-behavior-x: contain;
  user-select: none;
  cursor: grab;
}
[data-infinite-gallery], [data-infinite-gallery]::before, [data-infinite-gallery]::after, [data-infinite-gallery] *, [data-infinite-gallery] *::before, [data-infinite-gallery] *::after {
  box-sizing: border-box;
}
[data-infinite-gallery], [data-infinite-gallery] * {
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
[data-infinite-gallery] button {
  font: inherit;
}
[data-infinite-gallery] button:not(.metal-control) {
  color: inherit;
  border: 0;
  background: none;
}
[data-infinite-gallery]:focus-visible, [data-infinite-gallery] button:focus-visible {
  outline: none;
}
[data-infinite-gallery][data-keyboard-focus]:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: -4px;
}
[data-infinite-gallery][data-keyboard-focus] .tile:focus-visible, [data-infinite-gallery][data-keyboard-focus] .close:focus-visible,
[data-infinite-gallery][data-keyboard-focus] .previous:focus-visible span, [data-infinite-gallery][data-keyboard-focus] .next:focus-visible span {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}
[data-infinite-gallery][data-keyboard-focus] .previous:focus-visible span, [data-infinite-gallery][data-keyboard-focus] .next:focus-visible span {
  display: flex;
}
[data-infinite-gallery][data-dragging] {
  cursor: grabbing;
}
[data-infinite-gallery] .scene, [data-infinite-gallery] .parallax, [data-infinite-gallery] .veil, [data-infinite-gallery] .viewer {
  position: absolute;
  inset: 0;
}
[data-infinite-gallery] .scene {
  opacity: 0;
}
[data-infinite-gallery] .scene .tile {
  position: absolute;
  left: 0;
  top: 0;
  cursor: inherit;
}
[data-infinite-gallery][data-ready] .scene {
  opacity: 1;
}
[data-infinite-gallery] img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
}
[data-infinite-gallery] .veil {
  z-index: 1;
  background: var(--surface-1);
  opacity: 0;
  pointer-events: none;
}
[data-infinite-gallery] .viewer {
  z-index: 2;
  cursor: pointer;
}
[data-infinite-gallery] .viewer[hidden] {
  display: none;
}
[data-infinite-gallery] .viewer:focus {
  outline: none;
}
[data-infinite-gallery] .viewer .frame {
  position: absolute;
  pointer-events: none;
}
[data-infinite-gallery] .project-preview-video{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:contain;border-radius:3px;pointer-events:none;opacity:0;transition:opacity .18s ease}
[data-infinite-gallery] .project-preview-video[data-playing]{opacity:1}
[data-infinite-gallery] .tile-intro-video{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:contain;border-radius:3px;pointer-events:none;opacity:0;transition:opacity .16s ease}
[data-infinite-gallery] .tile-intro-video[data-playing]{opacity:1}
[data-infinite-gallery] .viewer button {
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms;
}
[data-infinite-gallery] .viewer .previous, [data-infinite-gallery] .viewer .next {
  position: absolute;
  top: 10%;
  bottom: 14%;
  width: 50%;
  cursor: inherit;
}
[data-infinite-gallery] .viewer .previous span, [data-infinite-gallery] .viewer .next span {
  display: none;
  position: absolute;
  top: 50%;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface-2-65);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  font-size: 20px;
}
@media (hover: none), (pointer: coarse) {
  [data-infinite-gallery] .viewer .previous span, [data-infinite-gallery] .viewer .next span {
    display: flex;
  }
}
[data-infinite-gallery] .viewer .previous {
  left: 0;
}
[data-infinite-gallery] .viewer .previous span {
  left: 16px;
}
[data-infinite-gallery] .viewer .next {
  right: 0;
}
[data-infinite-gallery] .viewer .next span {
  right: 16px;
}
[data-infinite-gallery] .viewer .close {
  position: absolute;
  top: max(20px, env(safe-area-inset-top));
  left: max(20px, env(safe-area-inset-left));
  right: auto;
  bottom: auto;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  min-height: 44px;
  padding: 10px 17px;
  border-radius: 30px;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}
[data-infinite-gallery] .viewer .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
[data-infinite-gallery][data-state=opening] .viewer button, [data-infinite-gallery][data-state=open] .viewer button, [data-infinite-gallery][data-state=changing] .viewer button {
  opacity: 1;
  pointer-events: auto;
}
[data-infinite-gallery][data-cursor-visible] .viewer {
  cursor: none;
}
[data-infinite-gallery] .cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: opacity 240ms ease, visibility 0s 240ms;
}
[data-infinite-gallery] .cursor span {
  display: block;
  padding: 13px 23px;
  border-radius: 30px;
  background: var(--surface-2-65);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: var(--text-1);
  font-size: 14px;
  line-height: 1.35;
  white-space: nowrap;
  transform: translate(-50%, -50%) scale(0.9);
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
[data-infinite-gallery][data-cursor-visible]:not(:has([data-close]:hover)) .cursor {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}
[data-infinite-gallery][data-cursor-visible]:not(:has([data-close]:hover)) .cursor span {
  transform: translate(-50%, -50%) scale(1);
}

[data-infinite-gallery]{--surface-1:#17191c;--surface-2:#30353b;--surface-2-65:#373e45a6;--text-1:#f1f0ed;--focus-ring-color:#d4e4f2;height:min(76svh,800px);min-height:420px;border:1px solid #ffffff25}
[data-infinite-gallery] img{border-radius:3px;box-shadow:0 18px 45px #0008}
[data-infinite-gallery] .viewer .visit-site{position:absolute;left:50%;top:20px;transform:translateX(-50%);display:grid;grid-template-columns:minmax(0,1fr);place-items:center;max-width:90%;padding:12px 20px;border-radius:30px;font-size:13px;z-index:4;cursor:pointer;text-align:center}
[data-infinite-gallery] .viewer .visit-label{grid-area:1/1;display:flex;align-items:center;justify-content:center;gap:.4em;min-width:0;width:max-content;max-width:100%;pointer-events:none}
[data-infinite-gallery] .viewer .visit-label-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
[data-infinite-gallery] .viewer .visit-label-arrow{flex:none}
[data-infinite-gallery][data-cursor-visible]:has([data-visit]:hover) .cursor{opacity:0;visibility:hidden}
[data-infinite-gallery] .viewer [data-project-description]{position:absolute;z-index:4;left:50%;width:min(600px,calc(100% - 48px));transform:translateX(-50%);margin:0;color:#cbd0d6;font-size:14px;font-weight:400;line-height:1.55;text-align:center;overflow-wrap:break-word;user-select:text;cursor:text;opacity:0;transition:opacity .2s ease;pointer-events:auto}
[data-infinite-gallery][data-state=open] .viewer [data-project-description],
[data-infinite-gallery][data-state=changing] .viewer [data-project-description]{opacity:1}
[data-infinite-gallery][data-cursor-visible]:has([data-project-description]:hover) .cursor{opacity:0;visibility:hidden}
@media(max-width:600px){[data-infinite-gallery] .viewer [data-project-description]{font-size:12px;line-height:1.6;width:calc(100% - 48px)}}
.gallery-help{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 0;color:var(--muted);font-size:11px}.gallery-help a{padding:12px 0;text-decoration:underline;text-underline-offset:5px}
.work-overview{margin-top:28px}.work-overview>summary{cursor:pointer;padding:18px 0;font-size:13px;border-top:1px solid var(--line);list-style:none}.work-overview>summary:after{content:' +';float:right}.work-overview[open]>summary:after{content:' −'}
@media(max-width:600px){[data-infinite-gallery]{height:65svh;min-height:380px}.gallery-help{font-size:10px}.gallery-help span{max-width:60%}}

/* A short, native page-scroll passage. The gallery releases after this distance;
   only its horizontal axis loops indefinitely when explicitly explored. */
.gallery-scroll{--gallery-viewport:clamp(420px,76svh,800px);--gallery-travel:90svh;position:relative}
.gallery-scroll:has([data-ready]){height:calc(var(--gallery-viewport) + var(--gallery-travel))}
.gallery-scroll>[data-infinite-gallery]{position:sticky;top:clamp(12px,6svh,64px);height:var(--gallery-viewport);min-height:0}
[data-infinite-gallery] .gallery-controls{position:absolute;z-index:2;inset:auto 22px 20px;display:flex;align-items:center;justify-content:space-between;gap:14px;pointer-events:none;transition:opacity .2s}
[data-infinite-gallery] .gallery-controls button{display:grid;place-items:center;flex:none;width:46px;height:46px;pointer-events:auto;cursor:pointer;border:1px solid #ffffff45;border-radius:50%;background:#1b1f24dc;backdrop-filter:blur(12px);color:#edf0f2;font-size:21px;transition:background .2s,transform .2s}
[data-infinite-gallery] .gallery-controls button:hover{background:#39414a;transform:translateY(-2px)}
[data-infinite-gallery] .gallery-controls button:focus-visible{outline:2px solid var(--focus-ring-color);outline-offset:3px}
[data-infinite-gallery] .gallery-controls span{padding:9px 13px;background:#17191cdb;border-radius:30px;font-size:9px;line-height:1.6;letter-spacing:1.2px;text-align:center;color:#c4cbd2;backdrop-filter:blur(12px)}
[data-infinite-gallery]:not([data-state=grid]) .gallery-controls{visibility:hidden;opacity:0}
@media(max-width:600px){.gallery-scroll{--gallery-viewport:max(380px,65svh);--gallery-travel:45svh}.gallery-scroll>[data-infinite-gallery]{top:12px}[data-infinite-gallery] .gallery-controls{inset:auto 12px 14px;gap:8px}[data-infinite-gallery] .gallery-controls button{width:44px;height:44px}[data-infinite-gallery] .gallery-controls span{font-size:8px;letter-spacing:.8px;max-width:210px;padding:8px 10px}}
@media(prefers-reduced-motion:reduce){.gallery-scroll:has([data-ready]){height:auto}.gallery-scroll>[data-infinite-gallery]{position:relative;top:auto}[data-infinite-gallery] .gallery-controls button{transition:none}}

/* Dedicated /werk/ workspace: the parent supplies the height below its header.
   No sticky interval or extra document scroll space is added in this mode. */
/* Clip without creating a scroll container: focusing a partially visible tile
   must not move the viewer, veil or visit link inside the workspace. */
[data-infinite-gallery][data-gallery-mode=fullscreen]{position:relative;inset:auto;width:100%;height:100%;min-height:0;max-height:none;border:0;overflow:hidden;overflow:clip;touch-action:pinch-zoom;overscroll-behavior:contain;background:radial-gradient(ellipse at 50% 45%,#25292e 0%,#17191c 70%)}
[data-infinite-gallery][data-gallery-mode=fullscreen] .gallery-controls{inset:auto max(24px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left))}
[data-infinite-gallery][data-gallery-mode=fullscreen] .viewer .visit-site{top:max(20px,env(safe-area-inset-top));min-height:44px}
@media(max-width:760px){[data-infinite-gallery][data-gallery-mode=fullscreen] .viewer .visit-site{top:calc(max(20px,env(safe-area-inset-top)) + 60px)}}
[data-infinite-gallery][data-gallery-mode=fullscreen] .viewer .previous span,
[data-infinite-gallery][data-gallery-mode=fullscreen] .viewer .next span{width:44px;height:44px}
@media(max-width:600px){[data-infinite-gallery][data-gallery-mode=fullscreen] .gallery-controls{inset:auto max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}}