html,body{
  margin:0;
  min-height:100%;
  background:#f4f0e8;
  font-family:Arial,sans-serif;
}
*{box-sizing:border-box}
.stage{
  width:100%;
  display:flex;
  justify-content:center;
  overflow-x:auto;
}
.canvas{
  position:relative;
  width:min(100vw,1774px);
  aspect-ratio:1774/887;
  flex:0 0 auto;
  background:#f4f0e8;
}
.design{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  image-rendering:auto;
}
.language-hotspots{
  position:absolute;
  inset:0;
  z-index:25;
  pointer-events:none;
}
.language-hotspots button{
  position:absolute;
  top:0.8%;
  height:6.4%;
  border:0;
  padding:0;
  margin:0;
  background:transparent;
  cursor:pointer;
  pointer-events:auto;
}
.language-hotspots button[data-lang="en"]{left:76.55%;width:2.45%}
.language-hotspots button[data-lang="zh"]{left:79.15%;width:2.85%}
.language-hotspots button[data-lang="kk"]{left:82.05%;width:4.95%}
.language-hotspots button[data-lang="ru"]{left:87.10%;width:4.95%}

#earlyForm{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:20;
  margin:0;
  padding:0;
}
#name,#email{
  position:absolute;
  display:block;
  pointer-events:auto;
  margin:0;
  padding:0 14px;
  border:0;
  outline:none;
  border-radius:5px;
  background:#fff;
  color:#1b1713;
  font:500 clamp(11px,.82vw,15px)/1 Arial,sans-serif;
  box-shadow:none;
  appearance:none;
  -webkit-appearance:none;
}
#submit{
  position:absolute;
  pointer-events:auto;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  border-radius:8px;
}
.consent-hit{
  position:absolute;
  pointer-events:auto;
  cursor:pointer;
}
.consent-hit input{
  width:100%;
  height:100%;
  margin:0;
  opacity:.01;
  cursor:pointer;
}
.join-hit{
  position:absolute;
  display:block;
  z-index:21;
}
.hp{
  position:absolute!important;
  left:-9999px!important;
  top:-9999px!important;
  width:1px!important;
  height:1px!important;
  opacity:0!important;
}
#name:-webkit-autofill,
#email:-webkit-autofill,
#name:-webkit-autofill:hover,
#email:-webkit-autofill:hover,
#name:-webkit-autofill:focus,
#email:-webkit-autofill:focus{
  -webkit-text-fill-color:#1b1713!important;
  -webkit-box-shadow:0 0 0 1000px #fff inset!important;
  box-shadow:0 0 0 1000px #fff inset!important;
  transition:background-color 9999s ease-out 0s;
}
.toast{
  position:absolute;
  left:50%;
  top:48%;
  transform:translate(-50%,-50%) scale(.96);
  z-index:40;
  min-width:320px;
  padding:20px 26px;
  border:1px solid rgba(160,115,30,.25);
  border-radius:14px;
  background:rgba(255,252,245,.98);
  box-shadow:0 18px 55px rgba(0,0,0,.28);
  color:#1b1713;
  text-align:center;
  font:700 15px/1.4 Arial,sans-serif;
  opacity:0;
  pointer-events:none;
  transition:.2s;
}
.toast.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.toast.error{color:#841f1f}

@media(max-width:900px){
  .canvas{max-width:none}
}