html{scroll-behavior:smooth}#main-container{background:var(--hero-metropolis-page-bg)}.hero-metropolis-page-container{color:var(--default-color-2);flex:1;width:100%;margin:0;padding:30px 40px 40px}.hero-metropolis-page-container .all-themes-page-link{flex-flow:row;justify-content:center;align-items:center;gap:20px;margin:0 0 20px;padding:0;display:flex}@media screen and (width>=600px){.hero-metropolis-page-container .all-themes-page-link{justify-content:flex-start}}.hero-metropolis-page-container .page-inner{max-width:1600px;min-height:1000px;image-rendering:pixelated;margin:0 auto;padding:0}@media screen and (width>=600px){.hero-metropolis-page-container .page-inner{background-blend-mode:lighten;background-color:#0000;background-image:url(https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/interfaces/hero-metropolis-bg-left.png),url(https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/interfaces/hero-metropolis-bg-right.png);background-position:5% 0,right 5% top;background-repeat:no-repeat;background-size:20%,20%;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;padding:0 40px 60px}}.hero-metropolis-page-container section{flex-flow:column wrap;justify-content:center;align-items:center;margin:0;padding:0 0 clamp(40px,8vw,80px);display:flex;position:relative}.hero-metropolis-page-container section.header{width:45%;min-width:260px;max-width:680px;margin:0 auto}.hero-metropolis-page-container section.header h1{margin:5% 0 0}.hero-metropolis-page-container section.header h1 span{text-indent:-99999px;display:block;position:absolute}.hero-metropolis-page-container section.header .theme-title{width:100%;max-width:100%;margin-bottom:clamp(30px,6vw,70px);display:block}.hero-metropolis-page-container section.header h2{text-align:center;text-transform:none;margin:0 0 30px;font-family:Sofia Pro;font-size:clamp(18px,3vw,40px);font-style:normal;font-weight:800;line-height:1.2em}.hero-metropolis-page-container section.header h3{text-align:center;text-transform:none;margin:0 0 clamp(30px,6vw,70px);font-family:Sofia Pro;font-size:clamp(14px,2vw,23px);font-style:normal;font-weight:400;line-height:1.2em}.hero-metropolis-page-container section.scene .scene-visual{width:100%}.hero-metropolis-page-container section.scene .caption{text-align:center;max-width:920px;margin:0;line-height:1.2em}.hero-metropolis-page-container section.scene.scene-large .scene-visual{width:100%;max-width:1000px}.hero-metropolis-page-container section.scene.scene-large .caption{font-size:clamp(18px,4vw,40px);font-weight:800}.hero-metropolis-page-container section.scene.scene-small .scene-visual{width:calc(100% - 40px);max-width:800px}.hero-metropolis-page-container section.scene.scene-small .caption{font-size:clamp(14px,4vw,30px);font-weight:700}.hero-metropolis-page-container section.characters{flex-flow:column wrap;gap:60px 30px;display:flex}.hero-metropolis-page-container section.characters .character{flex-flow:row;justify-content:center;align-items:flex-start;gap:20px 40px;width:100%;max-width:1200px;margin:0 auto;padding:0;display:flex}.hero-metropolis-page-container section.characters .character .character-dialog{flex:3}.hero-metropolis-page-container section.characters .character .character-dialog h2{text-transform:none;margin:0 0 20px;font-size:clamp(18px,3vw,40px);font-style:italic;font-weight:800;line-height:1.2em}.hero-metropolis-page-container section.characters .character .character-dialog p{margin:0;font-size:clamp(14px,2vw,23px);font-style:normal;font-weight:400;line-height:1.4em}.hero-metropolis-page-container section.characters .character .character-visual{text-align:center;flex:2;min-width:100px;margin:0 auto}.hero-metropolis-page-container section.characters .character .character-visual img{width:100%;min-width:250px;max-width:400px;image-rendering:pixelated}@media screen and (width<=799px){.hero-metropolis-page-container section.characters .character{flex-flow:column wrap}}@media screen and (width>=800px){.hero-metropolis-page-container section.characters .character:nth-child(odd){flex-direction:row-reverse}}.hero-metropolis-page-container section.footer{width:100%;min-width:260px;max-width:920px;margin:40px auto 0}.hero-metropolis-page-container section.footer h2{text-align:center;text-transform:none;margin-bottom:clamp(30px,6vw,70px);font-family:Sofia Pro;font-size:clamp(18px,3vw,40px);font-style:normal;font-weight:800;line-height:1.2em}