*,*:before,*:after{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0}img{display:block;max-width:100%}h1,h2,h3,p{margin:0}body{font-family:system-ui,-apple-system,Segoe UI,sans-serif;background-color:#111;color:#f4f4f4;line-height:1.5}@property --look-ix{syntax: "<length>"; inherits: true; initial-value: 0px;}@property --look-iy{syntax: "<length>"; inherits: true; initial-value: 0px;}.tile{perspective:var(--perspective);transform-style:preserve-3d;transform:translate3d(calc((var(--col) - 1) * -1px),calc((var(--row) - 1) * -1px),0);transition:transform var(--t-gap) var(--e-gap)}.tile__look{width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(0) rotateY(0)}.tile__card{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform var(--t-flip) var(--e-flip);transition-delay:calc(var(--row) * var(--t-stagger))}.tile__card.is-flipped{transform:rotateX(180deg);transition-delay:calc((var(--size) - 1 - var(--row)) * var(--t-stagger))}.tile__card.is-snap{transition:none;transition-delay:0ms}.tile__card.is-spin-next,.tile__card.is-spin-prev{transform:rotateY(calc(var(--spin-y) * 180deg))}.tile__card.is-spin-next .tile__face--back,.tile__card.is-spin-prev .tile__face--back{transform:rotateY(180deg) translateZ(1px)}.tile__card.is-spin-next{transition-delay:calc(var(--col) * var(--t-stagger))}.tile__card.is-spin-prev{transition-delay:calc((var(--size) - 1 - var(--col)) * var(--t-stagger))}.tile__face{width:100%;height:100%;position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;backface-visibility:hidden;transform:translateZ(1px);--r-tl: calc(var(--r) * (1 - min(var(--col), 1)) * (1 - min(var(--row), 1)));--r-tr: calc(var(--r) * (1 - min(var(--size) - 1 - var(--col), 1)) * (1 - min(var(--row), 1)));--r-bl: calc(var(--r) * (1 - min(var(--col), 1)) * (1 - min(var(--size) - 1 - var(--row), 1)));--r-br: calc(var(--r) * (1 - min(var(--size) - 1 - var(--col), 1)) * (1 - min(var(--size) - 1 - var(--row), 1)));border-radius:var(--r-tl) var(--r-tr) var(--r-br) var(--r-bl);transition:border-radius var(--t-radius) var(--e-radius)}.tile__face--back{transform:rotateX(180deg) translateZ(1px)}.tile__face--mosaic .tile__image{width:calc(var(--size) * 100% + 16%);height:calc(var(--size) * 100% + 16%);left:calc(var(--col) * -100% - 8%);top:calc(var(--row) * -100% - 8%)}.tile__face--full .tile__image{inset:auto;width:116%;height:116%;left:-8%;top:-8%}.tile__image{position:absolute;max-width:none;object-fit:cover;transform:translate3d(var(--look-ix, 0px),var(--look-iy, 0px),0)}.gallery{--gallery-padding: 0;--gap: 2vw;--r: .8vw;--controls-size: 4vw;--controls-inset: 1.2vw;--grid-width: 80vw;--grid-height: 85vh;box-sizing:border-box;width:100vw;height:100vh;display:grid;grid-template-columns:auto var(--grid-width) auto;grid-template-rows:auto var(--grid-height);grid-template-areas:"prev view next" "prev gallery next";gap:0}.gallery__controls{background-color:transparent;border:none;cursor:pointer;color:#fff}.gallery__controls:focus{outline:none}.gallery__controls--view{grid-area:view;width:100%;height:100%;display:flex;align-items:flex-end;justify-content:center;padding-bottom:var(--controls-inset)}.gallery__controls--view:hover .gallery__mark,.gallery__controls--view:focus-visible .gallery__mark{opacity:1}.gallery__controls--prev{grid-area:prev}.gallery__controls--next{grid-area:next}.gallery__controls--prev,.gallery__controls--next{width:100%;height:100%;position:relative;padding:0}.gallery__controls--prev:after,.gallery__controls--next:after{content:"";position:absolute;top:calc(100% - var(--grid-height) / 2);width:calc(var(--controls-size) * .28);height:calc(var(--controls-size) * .28);border-left:2.5px solid currentColor;border-bottom:2.5px solid currentColor;opacity:.28;transition:opacity .16s ease}.gallery__controls--prev:hover:after,.gallery__controls--prev:focus-visible:after,.gallery__controls--next:hover:after,.gallery__controls--next:focus-visible:after{opacity:1}.gallery__controls--prev:after{right:var(--controls-inset);transform:translateY(-50%) rotate(45deg)}.gallery__controls--next:after{left:var(--controls-inset);transform:translateY(-50%) rotate(-135deg)}.gallery__mark{--mark-h: 2.4vw;--mark-gap: calc(var(--gap) / var(--grid-height) * var(--mark-h) * 4);--mark-r: calc(var(--r) / var(--grid-height) * var(--mark-h) * 4);box-sizing:border-box;width:calc(var(--grid-width) / var(--grid-height) * var(--mark-h));height:var(--mark-h);display:grid;grid-template-columns:repeat(var(--size),1fr);grid-template-rows:repeat(var(--size),1fr);gap:var(--mark-gap);pointer-events:none;opacity:.28;transition:gap var(--t-gap) var(--e-gap),opacity .16s ease}.gallery__mark-cell{display:block;font-style:normal;background:currentColor;border-radius:var(--mark-r);transition:border-radius var(--t-radius) var(--e-radius)}.gallery[data-mode=fullscreen] .gallery__mark{gap:0}.gallery[data-mode=fullscreen] .gallery__mark-cell{--r-tl: calc(var(--mark-r) * (1 - min(var(--col), 1)) * (1 - min(var(--row), 1)));--r-tr: calc( var(--mark-r) * (1 - min(var(--size) - 1 - var(--col), 1)) * (1 - min(var(--row), 1)) );--r-bl: calc( var(--mark-r) * (1 - min(var(--col), 1)) * (1 - min(var(--size) - 1 - var(--row), 1)) );--r-br: calc( var(--mark-r) * (1 - min(var(--size) - 1 - var(--col), 1)) * (1 - min(var(--size) - 1 - var(--row), 1)) );border-radius:var(--r-tl) var(--r-tr) var(--r-br) var(--r-bl)}.gallery__grid{grid-area:gallery;box-sizing:border-box;width:var(--grid-width);height:var(--grid-height);padding:var(--gap);padding-bottom:calc(2 * var(--gap));display:grid;grid-template-columns:repeat(var(--size),1fr);grid-template-rows:repeat(var(--size),1fr)}.gallery[data-hold-gaps] .tile__look{transition:transform var(--t-look-off) var(--e-look-off),--look-ix var(--t-look-off) var(--e-look-off),--look-iy var(--t-look-off) var(--e-look-off)}.gallery[data-look-off] .tile__look{transform:rotateX(0) rotateY(0);--look-ix: 0px;--look-iy: 0px}.gallery[data-turn] .tile__card{transition-delay:0ms}.gallery[data-turn] .tile__card:not(.is-flipped){transform:rotate3d(var(--flip-ax, 1),var(--flip-ay, 0),0,0)}.gallery[data-turn] .tile__card.is-flipped{transform:rotate3d(var(--flip-ax, 1),var(--flip-ay, 0),0,180deg);transition-delay:0ms}.gallery[data-turn] .tile__card .tile__face--back{transform:rotate3d(var(--flip-ax, 1),var(--flip-ay, 0),0,180deg) translateZ(1px)}.gallery[data-mode=fullscreen]:not([data-peek-off]):has(.gallery__controls:hover) .tile,.gallery[data-mode=fullscreen]:not([data-peek-off]):has(.gallery__controls:focus-visible) .tile{transform:translate3d(calc((var(--col) - 1) * var(--gap)),calc((var(--row) - 1) * var(--gap)),0)}.gallery[data-mode=gallery] .tile,.gallery[data-hold-gaps] .tile{transform:translate3d(calc((var(--col) - 1) * var(--gap)),calc((var(--row) - 1) * var(--gap)),0)}.gallery[data-mode=fullscreen]:not([data-peek-off]):has(.gallery__controls:hover) .tile__face,.gallery[data-mode=fullscreen]:not([data-peek-off]):has(.gallery__controls:focus-visible) .tile__face,.gallery[data-mode=gallery] .tile__face,.gallery[data-hold-gaps] .tile__face{border-radius:var(--r)}.gallery[data-mode=gallery] .tile{cursor:pointer}.gallery[data-mode=fullscreen] .gallery__grid{cursor:default}.app{min-height:100vh}