@import url("https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@500&display=swap");   :root {   --zt-quart-out: cubic-bezier(.25, 1, .5, 1);
  --zt-quart-inout: cubic-bezier(.76, 0, .24, 1);
  --zt-cubic-out: cubic-bezier(.33, 1, .68, 1);
  --zt-cubic-inout: cubic-bezier(.65, 0, .35, 1);
  --zt-sweep-ease: cubic-bezier(.165, .84, .44, 1);
}
.zt {
  position: relative; width: 100%; height: 100vh; height: 100svh; overflow: hidden;
  background: #0b2a8a; color: #fff;   }
.zt::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 180px; z-index: 1; pointer-events: none; background: linear-gradient(rgba(8, 18, 60, .22), rgba(8, 18, 60, 0)); }   @keyframes ztRise { to { opacity: 1; transform: none; } }
@keyframes ztFade { to { opacity: 1; } }

.zt-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; }
.zt-canvas.is-ready { animation: ztFade .6s var(--zt-cubic-out) forwards; }

.zt-glass {
  position: absolute; z-index: 5; right: 0; top: 0; width: 58vw; height: 100%;
  pointer-events: none;
  clip-path: inset(0 0 100% 0);
  animation: ztGlass 1.8s var(--zt-quart-inout) .2s forwards;
}
.zt-glass__blur, .zt-glass__face { position: absolute; inset: 0; }
.zt-glass__blur {
  -webkit-backdrop-filter: blur(22px) saturate(1.25); backdrop-filter: blur(22px) saturate(1.25);
  background: rgba(255, 255, 255, .06);
  -webkit-mask: url("/img/zt/ribbon-mask.svg?v=3") 0 0 / 100% 100% no-repeat; mask: url("/img/zt/ribbon-mask.svg?v=3") 0 0 / 100% 100% no-repeat;
}
.zt-glass__face { background: url("/img/zt/ribbon-glass.svg?v=3") 0 0 / 100% 100% no-repeat; }   @keyframes ztGlass { to { clip-path: inset(0 0 0 0); } }

.hd.is-on-dark .hd-top { color: #fff; }
.hd.is-on-dark .hd-top svg { filter: brightness(0) invert(1); }
.hd.is-on-dark .hd-lang a:not([aria-current="true"]), .hd.is-on-dark .hd-lang span { color: rgba(255, 255, 255, .62); }
.hd.is-on-dark .hd-cta { background: #fff; }
.hd.is-on-dark .hd-cta .cta-l { color: #12192e; }

.zt-key { position: absolute; z-index: 10; pointer-events: none; }
.zt-key--a { left: 6.25vw; top: 50%; translate: 0 calc(-46% + 96px); }   .zt-copy {
  margin: 0;
  font-family: "Zen Old Mincho", serif; font-weight: 500;
  font-size: min(66px, 4.6vw); line-height: 1.62; letter-spacing: .05em;   white-space: nowrap; color: #fff;
  opacity: 0; transform: translateY(10px);
  animation: ztRise 1.2s var(--zt-quart-inout) .4s forwards;
}
.zt-en {
  margin: 26px 0 0; font-family: "Lexend Exa", sans-serif; font-weight: 400;
  font-size: 14px; line-height: 1.4; letter-spacing: .1em; color: #fff;
  opacity: 0; transform: translateY(10px);
  animation: ztRise 1.2s var(--zt-quart-inout) .7s forwards;
}
html[lang="en"] .zt-copy { font-size: min(42px, 2.92vw); letter-spacing: .01em; }   @media (max-width: 1040px) {
  .zt-glass {
    --zt-sq: min(120vw, 68svh);
    top: calc(var(--zt-sq) * -0.1); right: calc(var(--zt-sq) * -0.13); width: var(--zt-sq); height: var(--zt-sq);   -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent);
  }
  .zt-key--a { left: 8vw; right: 8vw; top: auto; bottom: 12svh; translate: none; }
  .zt-copy { font-size: clamp(25px, 7.9vw, 56px); letter-spacing: .04em; }
  .zt-en { font-size: clamp(11px, 3vw, 14px); margin-top: clamp(14px, 4vw, 24px); }
  html[lang="en"] .zt-copy { font-size: clamp(22px, 6.4vw, 44px); white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .zt * { animation-duration: .01s !important; animation-delay: 0s !important; }
}