.fd{container:fd/inline-size;position:relative;width:100%}
.fd-in{position:relative;height:var(--fh);--fh:600px;--tw:112px;--a:80px}
.fd--page .fd-in{--fh:360px;--a:82px}
.fd-tiles{position:absolute;inset:0;pointer-events:none}
.fd-t{position:absolute;--u:var(--u1);--y:var(--y1);--d:var(--d1);width:var(--tw);height:var(--tw);
  left:calc(var(--a) + var(--u) * (100% - 2 * var(--a)) - var(--tw) / 2);top:calc(var(--y) - var(--th, var(--tw)) / 2);
  animation:fd-drift var(--p,12s) ease-in-out var(--q,0s) infinite alternate}
.fd-tl{--th:calc(var(--tw) * 148 / 112);height:var(--th)}
.fd-f{position:absolute;inset:0;overflow:hidden;border-radius:2px;background:#ece8de;
  animation:fd-show 0s 1.6s both}
/* entrance: field.js adds .is-in when the field is seen; until then a tile shows on its own after 1.6s.
   Both states run the same animation, so a late .is-in only retimes it and never restarts it. */
.fd.is-in .fd-f{animation:fd-show .32s cubic-bezier(.2,0,0,1) var(--d,0ms) both}
.fd-f::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(20,20,19,.09);pointer-events:none}
.fd-f>svg,.fd-f>img{position:absolute;display:block;width:100%;height:100%;inset:0;max-width:none;object-fit:cover}
.fd-f>img[style]{inset:auto}
.fd-f.fd-x{animation:none;opacity:0;transition:opacity .5s ease}
.fd-f.fd-x.fd-on{opacity:1}
.fd-f.fd-out{animation:none;opacity:0;transition:opacity .5s ease}
.fd-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:42%;max-width:36em;text-align:center;z-index:1}
.fd-center>:first-child{margin-top:0}
.fd-center .button{margin-top:4px}
.fd-off .fd-t{animation-play-state:paused}
@keyframes fd-drift{from{transform:translateY(-5px)}to{transform:translateY(5px)}}
@keyframes fd-show{from{opacity:0}to{opacity:1;transform:none}}

/* widths 1140+, 900-1139 */
@container fd (min-width:1140px){.fd-v1-0{display:none}}
@container fd (min-width:900px) and (max-width:1139.98px){
  .fd-t{--u:var(--u2);--y:var(--y2);--d:var(--d2)}.fd-v2-0{display:none}.fd-center{width:44%}}
/* widths 560-899 */
@container fd (min-width:560px) and (max-width:899.98px){
  .fd-t{--u:var(--u3);--y:var(--y3);--d:var(--d3)}.fd-v3-0{display:none}
  .fd--home .fd-in{--fh:640px;--a:80px}.fd--page .fd-in{--a:80px}.fd-center{width:50%}}
@container fd (min-width:560px) and (max-width:699.98px){.fd-v3-1{display:none}}
@container fd (min-width:560px) and (max-width:619.98px){.fd-v3-2{display:none}}
/* widths under 560 */
@container fd (max-width:559.98px){
  .fd-t{--u:var(--u4);--y:var(--y4);--d:var(--d4)}.fd-v4-0{display:none}
  .fd-in{--tw:60px;--a:48px}.fd--page .fd-in{--fh:300px}
  .fd--home .fd-in{height:auto;padding:126px 0}
  .fd--home .fd-center{position:relative;left:auto;top:auto;transform:none;width:auto;margin:0 auto;padding:4px 0}}
@container fd (max-width:329.98px){.fd-v4-1{display:none}}

@media (prefers-reduced-motion:reduce){.fd-t,.fd-f{animation:none!important}.fd-f:not(.fd-x):not(.fd-out){opacity:1}.fd-f.fd-x,.fd-f.fd-out{transition:none}}

/* phones: secondary pages show the field as an even grid instead of a scatter */
@container fd (max-width:559.98px){
  .fd--page .fd-in{height:auto}
  .fd--page .fd-tiles{position:static;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
  .fd--page .fd-t{position:relative;left:auto;top:auto;width:auto;height:auto;aspect-ratio:1;animation:none}
  .fd--page .fd-tl{--th:auto;height:auto}
}

/* home entrance: the tiles gather as a wall at the centre, then peel away to the field one after another
   (each leaves in the order it arrived), on a long ease-out; the title rises while the wall is still parting */
.fd--home .fd-t{transition:left 1.6s cubic-bezier(.16,1,.3,1),top 1.6s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--gd,0ms) * .5)}
.fd--home.fd-gather .fd-t{left:calc(50% + var(--gx) - var(--tw) / 2);top:calc(var(--fh) / 2 + var(--gy) - var(--th,var(--tw)) / 2);transition-delay:0ms}
.fd--home .fd-center{transition:opacity 1.2s .35s,transform 1.2s .35s cubic-bezier(.16,1,.3,1)}
.fd--home.fd-gather .fd-center{opacity:0;transform:translate(-50%,-50%) translateY(10px) scale(.97)}
@media (prefers-reduced-motion:reduce){.fd--home .fd-t,.fd--home .fd-center{transition:none}}
/* the wall is built one tile at a time, each arriving with a small lift */
@keyframes fd-arrive{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}
.fd--home.is-in .fd-f{animation:fd-arrive .5s cubic-bezier(.2,0,0,1) var(--gd,0ms) both}