:root{
  --bg:#f5f5f6;
  --card:#ffffff;
  --accent:#e53935;
}

*{box-sizing:border-box;margin:0;padding:0}

html,body,#stage{height:100%}

body{
  background:linear-gradient(180deg,var(--bg),#ffffff);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  -webkit-font-smoothing:antialiased;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

#stage{
  width:100%;
  max-width:1200px;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

#hero{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,0.12);
  transition:transform 350ms ease, box-shadow 350ms ease;
  touch-action:manipulation;
  background:var(--card);
  padding:8px;
}

/* subtle interactive scale on pointer */
#hero:active,
#hero:focus{
  transform:scale(0.995);
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
  outline:none;
}

/* ensure it fills most of the viewport on mobile without overflow */
@media (max-height:700px){
  #stage{padding-top:8px;padding-bottom:8px}
}