.hero-heading{position:absolute;left:5.5%;right:5.5%;top:20%;pointer-events:none}
.hero-heading h1{position:static;margin:0;pointer-events:auto}
.hero-heading .hero-actions{margin-top:calc(18px + 14px * var(--copy-large,1));pointer-events:auto;gap:16px}
.hero-motion-button{--roll-height:calc(22px + 2px * var(--copy-large,1));min-height:calc(60px + 12px * var(--copy-large,1));padding:calc(7px + 3px * var(--copy-large,1));padding-left:calc(24px + 4px * var(--copy-large,1));gap:26px;font-size:calc(15px + 2px * var(--copy-large,1))}
.hero-motion-button .arrow-dot{width:calc(42px + 10px * var(--copy-large,1));height:calc(42px + 10px * var(--copy-large,1))}
.hero-motion-button .arrow-dot svg{width:21px;height:21px}
.hero-bottom{left:auto;right:5.5%;bottom:8%;width:min(720px,44.5%);display:block}
.selected-track,.selected-stage{background:#020408}
.room-space{mask-image:linear-gradient(180deg,#000 0%,#000 78%,#0009 90%,transparent 100%)}
.room-foreground{clip-path:none!important}
.proof-section{background:linear-gradient(180deg,#020408,#03070d 40%,#020408)}
.proof-section::before{mask-image:linear-gradient(180deg,transparent,#000 30%)}
html,body{background:#000}
.proof-section{background:linear-gradient(180deg,#020408,#03070d 40%,#000)}
.proof-section::before{mask-image:linear-gradient(180deg,transparent,#000 30%,#000 75%,transparent)}
.demo-space{position:relative;height:200svh;min-height:200svh;background:#000;overflow:clip}
.demo-space>span{position:absolute;top:0;left:0;width:1px;height:1px;pointer-events:none}
@media(max-width:700px){
 .hero-heading{left:20px;right:20px;top:var(--title-y,19%)}
 .hero-heading .hero-actions{margin-top:calc(14px + 10px * var(--copy-large,1));gap:9px}
 .hero-motion-button{min-height:calc(56px + 4px * var(--copy-large,1));font-size:calc(14px + var(--copy-large,1) * 1px);padding:7px;padding-left:22px;gap:22px}
 .hero-motion-button .arrow-dot{width:calc(38px + 4px * var(--copy-large,1));height:calc(38px + 4px * var(--copy-large,1))}
 .hero-bottom{left:20px;right:20px;bottom:6%;width:auto}
 .reduced .hero-heading{top:19%}
}
@media(max-width:360px){
 .hero-heading{left:16px;right:16px}
 .hero-motion-button{min-height:calc(52px + 4px * var(--copy-large,1));font-size:14px;padding:7px;padding-left:20px}
 .hero-motion-button .arrow-dot{width:calc(34px + 4px * var(--copy-large,1));height:calc(34px + 4px * var(--copy-large,1))}
 .hero-bottom{left:16px;right:16px;bottom:5%}
}