/* Generated from manifest.json. Strategy: swap @ 768px. */

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  width: 100%; min-height: 100%;
  /* image-set() lets the browser pick WebP and fall back to JPEG.
     A separate @media rule below swaps in a smaller mobile-sized image
     on narrow viewports so phones don't download the desktop file. */
  background-image: url("/shared-assets/site-background.jpg");
  background-image: image-set(
    url("/shared-assets/site-background.webp") type("image/webp"),
    url("/shared-assets/site-background.jpg") type("image/jpeg")
  );
  background-color: #ffffff;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* ── Desktop (≥ 768px): full-bleed fixed frame, contain-scaled stage ── */
@media (min-width: 768px) {
  html, body { height: 100%; overflow: hidden; }
  .frame {
    position: fixed; inset: 0;
    width: 100vw; height: 100vh; height: 100dvh;
    overflow: hidden;
  }
  .stage-desktop {
    position: absolute; top: 0; left: 0;
    width: 1920px; height: 1080px;
    transform-origin: 0 0;
    will-change: transform;
  }
  .stage-mobile { display: none; }
}

/* ── Mobile (< 768px): body scrolls vertically, stage scales by width ── */
@media (max-width: 767px) {
  html, body { overflow-x: hidden; overflow-y: auto; }
  .stage-desktop { display: none; }
  .frame {
    position: relative;
    width: 100vw;
    height: calc(100vw * 844 / 390);
  }
  .stage-mobile {
    position: absolute;
    top: 0; left: 0;
    width: 390px; height: 844px;
    transform-origin: 0 0;
    will-change: transform;
  }
  /* Mobile-sized background — ~32KB instead of ~400KB on phones. */
  html, body {
    background-image: url("/shared-assets/site-background-mobile.jpg");
    background-image: image-set(
      url("/shared-assets/site-background-mobile.webp") type("image/webp"),
      url("/shared-assets/site-background-mobile.jpg") type("image/jpeg")
    );
  }
}
.stage img.el, .stage div.el, .stage h1.el, .stage h2.el, .stage p.el, .stage span.el, .stage button.el, .stage a.el, .stage strong.el {
  position: absolute;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
  user-select: none;
  -webkit-user-drag: none;
}
/* Link wrappers: scale + filter applied to the whole anchor so the hit area
   stays in sync with the visual. transform-origin: center keeps the icon
   anchored at its center while it grows. */
.stage a.link-wrap {
  display: block;
  line-height: 0;
  text-decoration: none;
  transition: transform .12s ease-out, filter .12s ease-out;
  transform-origin: center center;
}
.stage a.link-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  image-rendering: pixelated;
}
.stage a.link-wrap.is-hover {
  transform: scale(1.08);
  filter: brightness(1.12) drop-shadow(0 0 10px rgba(255,255,255,.65));
}
.stage a.link-wrap:active { transform: scale(.95); }
.stage .el-el_1 { display: none; }

/* ── Desktop layout (1920×1080) ── */
.stage-desktop .el-el_1 {
  left: 0px;
  top: 0px;
  width: 1920px;
  height: 1080px;
  z-index: 1;
}

.stage-desktop .el-el_2 {
  left: 1074px;
  top: 16px;
  width: 842px;
  height: 1074px;
  z-index: 1;
}

.stage-desktop .el-el_6 {
  left: 6px;
  top: 38px;
  width: 648px;
  height: 648px;
  z-index: 1;
}

.stage-desktop .el-el_7 {
  left: 621px;
  top: 42px;
  width: 633px;
  height: 268px;
  z-index: 1;
}

.stage-desktop .el-el_3 {
  left: 32px;
  top: 159px;
  width: 1633px;
  height: 918px;
  z-index: 1;
}

.stage-desktop .el-el_5 {
  left: 1161px;
  top: 661px;
  width: 319px;
  height: 181px;
  z-index: 1;
}

.stage-desktop .el-el_10 {
  left: 1502px;
  top: 667px;
  width: 306px;
  height: 173px;
  z-index: 1;
}

.stage-desktop .el-el_14 {
  left: 297px;
  top: 798px;
  width: 105px;
  height: 105px;
  z-index: 1091;
}

.stage-desktop .el-el_15 {
  left: 405px;
  top: 815px;
  width: 64px;
  height: 61px;
  z-index: 1256;
}

.stage-desktop .el-el_16 {
  left: 487px;
  top: 815px;
  width: 74px;
  height: 74px;
  z-index: 1183;
}

.stage-desktop .el-el_17 {
  left: 560px;
  top: 816px;
  width: 71px;
  height: 71px;
  z-index: 1198;
}

.stage-desktop .el-el_18 {
  left: 402px;
  top: 818px;
  width: 228px;
  height: 234px;
  z-index: 1019;
}

.stage-desktop .el-el_8 {
  left: 1158px;
  top: 847px;
  width: 321px;
  height: 182px;
  z-index: 1;
}

.stage-desktop .el-el_9 {
  left: 1504px;
  top: 847px;
  width: 319px;
  height: 180px;
  z-index: 1;
}

.stage-desktop .el-el_19 {
  left: 317px;
  top: 907px;
  width: 65px;
  height: 65px;
  z-index: 1237;
}

.stage-desktop .el-el_21 {
  left: 565px;
  top: 907px;
  width: 62px;
  height: 62px;
  z-index: 1260;
}

.stage-desktop .el-el_4 {
  left: 400px;
  top: 908px;
  width: 64px;
  height: 64px;
  z-index: 1244;
}

.stage-desktop .el-el_13 {
  left: 588px;
  top: 510px;
  width: 434px;
  height: 171px;
  z-index: 1013;
}

.stage-desktop .el-el_12 {
  left: 259px;
  top: 597px;
  width: 440px;
  height: 165px;
  z-index: 1014;
}

.stage-desktop .el-el_11 {
  left: -15px;
  top: 689px;
  width: 481px;
  height: 178px;
  z-index: 1012;
}

/* ── Mobile layout (390×844) ── */
.stage-mobile .el-el_1 {
  left: 0px;
  top: 0px;
  width: 390px;
  height: 844px;
  z-index: 1;
}

.stage-mobile .el-el_2 {
  left: 40px;
  top: 134px;
  width: 335px;
  height: 427px;
  z-index: 1;
}

.stage-mobile .el-el_6 {
  left: -13px;
  top: 3px;
  width: 215px;
  height: 215px;
  z-index: 1;
}

.stage-mobile .el-el_7 {
  left: 212px;
  top: 36px;
  width: 173px;
  height: 73px;
  z-index: 1;
}

.stage-mobile .el-el_3 {
  left: -1px;
  top: 446px;
  width: 665px;
  height: 374px;
  z-index: 1;
}

.stage-mobile .el-el_5 {
  left: 70px;
  top: 390px;
  width: 114px;
  height: 68px;
  z-index: 1;
}

.stage-mobile .el-el_10 {
  left: 203px;
  top: 393px;
  width: 114px;
  height: 67px;
  z-index: 1;
}

.stage-mobile .el-el_14 {
  left: 122px;
  top: 701px;
  width: 46px;
  height: 46px;
  z-index: 1473;
}

.stage-mobile .el-el_15 {
  left: 168px;
  top: 707px;
  width: 38px;
  height: 30px;
  z-index: 1877;
}

.stage-mobile .el-el_16 {
  left: 208px;
  top: 706px;
  width: 39px;
  height: 36px;
  z-index: 1712;
}

.stage-mobile .el-el_17 {
  left: 251px;
  top: 706px;
  width: 36px;
  height: 36px;
  z-index: 1772;
}

.stage-mobile .el-el_18 {
  left: 168px;
  top: 710px;
  width: 119px;
  height: 119px;
  z-index: 1071;
}

.stage-mobile .el-el_8 {
  left: 68px;
  top: 465px;
  width: 118px;
  height: 69px;
  z-index: 1;
}

.stage-mobile .el-el_9 {
  left: 197px;
  top: 465px;
  width: 130px;
  height: 67px;
  z-index: 1;
}

.stage-mobile .el-el_19 {
  left: 126px;
  top: 755px;
  width: 35px;
  height: 35px;
  z-index: 1816;
}

.stage-mobile .el-el_21 {
  left: 253px;
  top: 756px;
  width: 32px;
  height: 32px;
  z-index: 1977;
}

.stage-mobile .el-el_4 {
  left: 171px;
  top: 756px;
  width: 31px;
  height: 32px;
  z-index: 1999;
}

.stage-mobile .el-el_13 {
  left: 208px;
  top: 565px;
  width: 187px;
  height: 77px;
  z-index: 1069;
}

.stage-mobile .el-el_12 {
  left: 112px;
  top: 603px;
  width: 188px;
  height: 77px;
  z-index: 1069;
}

.stage-mobile .el-el_11 {
  left: -5px;
  top: 639px;
  width: 189px;
  height: 79px;
  z-index: 1067;
}