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,1672px);
  aspect-ratio:1672/941;
  flex:0 0 auto;
  background:#f4f0e8;
}
.design{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  image-rendering:auto;
}
.toast{
  position:absolute;
  left:50%;
  top:48%;
  transform:translate(-50%,-50%) scale(.96);
  z-index:30;
  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}

#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;
}

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