:root{
  --ink:#071a3b;
  --aqua:#27b9ad;
  --paper:#f5f1e8;
  --paper-2:#fffdf8;
  --shadow:0 30px 90px rgba(7,26,59,.14);
  --ease:cubic-bezier(.16,1,.3,1);
}

.preloader{
  position:fixed;inset:0;z-index:220;display:grid;place-items:center;padding:24px;
  background:
    radial-gradient(circle at 18% 18%,rgba(39,185,173,.16),transparent 26rem),
    radial-gradient(circle at 82% 76%,rgba(7,26,59,.10),transparent 24rem),
    linear-gradient(180deg,var(--paper-2),var(--paper));
  transition:opacity .7s var(--ease),visibility .7s var(--ease);
}
.preloader.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.preloader-card{
  display:grid;place-items:center;gap:24px;min-width:min(100%,320px);padding:38px 42px;
  border:1px solid rgba(7,26,59,.12);border-radius:36px;background:rgba(255,253,248,.74);
  box-shadow:var(--shadow);backdrop-filter:blur(18px);
}
.preloader-label{
  color:var(--ink);font-size:13px;font-weight:950;letter-spacing:.36em;text-transform:uppercase;
}

.weave-mark{
  --weave-bg:var(--paper-2);
  position:relative;display:block;width:100%;aspect-ratio:236/258;isolation:isolate;transform-style:preserve-3d;
}
.preloader-mark{width:154px}
.weave-piece,.weave-hole,.weave-thread{
  position:absolute;display:block;pointer-events:none;
}
.weave-piece{
  border-radius:2px;background:linear-gradient(135deg,#061735,#102348 55%,#071a3b);
  box-shadow:0 18px 34px rgba(7,26,59,.20);overflow:hidden;
}
.weave-piece:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.26),transparent);
  opacity:0;transform:translateX(-120%);
}
.weave-piece.is-aqua{background:linear-gradient(135deg,#24c4b8,#159d94);box-shadow:0 18px 34px rgba(39,185,173,.25)}
.weave-hole{z-index:16;border-radius:1px;background:var(--weave-bg)}
.wm-top{left:2.97%;top:2.71%;width:94.07%;height:11.63%;z-index:6;--delay:.04s;--from-x:-38%;--from-y:0}
.wm-spine{left:44.07%;top:14.34%;width:13.14%;height:30.23%;z-index:5;--delay:.16s;--from-x:0;--from-y:-34%}
.wm-left-arm{left:2.97%;top:23.64%;width:34.75%;height:11.63%;z-index:8;--delay:.28s;--from-x:-44%;--from-y:0}
.wm-right-arm{left:63.56%;top:23.64%;width:33.90%;height:11.63%;z-index:7;--delay:.36s;--from-x:44%;--from-y:0}
.wm-left-leg{left:24.58%;top:40.70%;width:13.14%;height:56.98%;z-index:4;--delay:.48s;--from-x:0;--from-y:-28%}
.wm-right-post{left:63.56%;top:40.70%;width:13.56%;height:20.54%;z-index:6;--delay:.58s;--from-x:0;--from-y:-24%}
.wm-left-dot{left:2.97%;top:66.28%;width:15.68%;height:12.02%;z-index:9;--delay:.70s;--from-x:-34%;--from-y:22%}
.wm-cross{left:44.07%;top:66.28%;width:53.39%;height:12.02%;z-index:8;--delay:.78s;--from-x:38%;--from-y:0}
.wm-foot{left:63.56%;top:83.33%;width:13.56%;height:14.34%;z-index:7;--delay:.88s;--from-x:0;--from-y:34%}
.wm-core{left:44.07%;top:49.22%;width:13.56%;height:12.02%;z-index:14;--delay:1.02s;--from-x:0;--from-y:0}
.wm-core-hole{left:47.88%;top:52.71%;width:5.93%;height:5.04%;--delay:1.18s}
.weave-thread{
  z-index:18;opacity:0;border-radius:999px;background:linear-gradient(90deg,transparent,rgba(39,185,173,.76),transparent);
  filter:drop-shadow(0 0 14px rgba(39,185,173,.24));
}
.thread-x{left:-10%;top:51%;width:120%;height:2px;transform-origin:left center}
.thread-y{left:50%;top:-8%;width:2px;height:116%;transform-origin:top center;background:linear-gradient(180deg,transparent,rgba(39,185,173,.66),transparent)}
.thread-low{left:-8%;top:72%;width:116%;height:2px;transform-origin:left center;animation-delay:.36s}

.weave-mark.is-waiting .weave-piece,.weave-mark.is-waiting .weave-hole{opacity:0}
.weave-mark.is-weaving .weave-piece{
  opacity:0;clip-path:inset(0 100% 0 0);
  transform:translate3d(var(--from-x,0),var(--from-y,0),0) scale(.98);
  animation:weaveHorizontal .92s var(--ease) forwards;animation-delay:var(--delay,0s);
}
.weave-mark.is-weaving .weave-piece.vertical{
  clip-path:inset(100% 0 0 0);animation-name:weaveVertical;
}
.weave-mark.is-weaving .weave-piece.block{
  clip-path:inset(45% 45% 45% 45%);animation-name:weaveBlock;
}
.weave-mark.is-weaving .weave-piece.is-aqua{animation-name:weaveCore}
.weave-mark.is-weaving .weave-piece:after{animation:pieceGlint .74s ease-out forwards;animation-delay:calc(var(--delay,0s) + .18s)}
.weave-mark.is-weaving .weave-hole{opacity:0;animation:weaveHole .38s var(--ease) forwards;animation-delay:var(--delay,1s)}
.weave-mark.is-weaving .thread-x{animation:threadAcross 1.18s var(--ease) .08s forwards}
.weave-mark.is-weaving .thread-y{animation:threadDown 1.18s var(--ease) .18s forwards}
.weave-mark.is-weaving .thread-low{animation:threadAcross 1.10s var(--ease) .48s forwards}

@keyframes weaveHorizontal{
  0%{opacity:0;clip-path:inset(0 100% 0 0);transform:translate3d(var(--from-x,0),var(--from-y,0),0) scale(.98)}
  42%{opacity:1}
  100%{opacity:1;clip-path:inset(0);transform:translate3d(0,0,0) scale(1)}
}
@keyframes weaveVertical{
  0%{opacity:0;clip-path:inset(100% 0 0 0);transform:translate3d(var(--from-x,0),var(--from-y,0),0) scale(.98)}
  42%{opacity:1}
  100%{opacity:1;clip-path:inset(0);transform:translate3d(0,0,0) scale(1)}
}
@keyframes weaveBlock{
  0%{opacity:0;clip-path:inset(45% 45% 45% 45%);transform:translate3d(var(--from-x,0),var(--from-y,0),0) scale(.76)}
  100%{opacity:1;clip-path:inset(0);transform:translate3d(0,0,0) scale(1)}
}
@keyframes weaveCore{
  0%{opacity:0;clip-path:inset(40% 40% 40% 40%);transform:scale(.68) rotate(12deg)}
  100%{opacity:1;clip-path:inset(0);transform:scale(1) rotate(0)}
}
@keyframes weaveHole{to{opacity:1}}
@keyframes pieceGlint{
  0%{opacity:0;transform:translateX(-120%)}
  40%{opacity:.55}
  100%{opacity:0;transform:translateX(120%)}
}
@keyframes threadAcross{
  0%{opacity:0;transform:scaleX(0)}
  22%,72%{opacity:1}
  100%{opacity:0;transform:scaleX(1)}
}
@keyframes threadDown{
  0%{opacity:0;transform:scaleY(0)}
  22%,72%{opacity:1}
  100%{opacity:0;transform:scaleY(1)}
}

@media (prefers-reduced-motion:reduce){
  .weave-mark.is-weaving .weave-piece,
  .weave-mark.is-weaving .weave-hole,
  .weave-mark.is-weaving .weave-thread{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}