.hero{position:relative;isolation:isolate}
.hero-surface{position:absolute;inset:0 -16px;z-index:-1;pointer-events:none;overflow:hidden;background:radial-gradient(ellipse at 48% 54%,#b7ccb52b,transparent 64%);mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent)}
.hero-surface:before{content:"";position:absolute;inset:0;opacity:.17;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.83' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.38' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:multiply}
.hero-surface:after{content:"";position:absolute;inset:0;background-image:linear-gradient(#42674e08 1px,transparent 1px),linear-gradient(90deg,#42674e08 1px,transparent 1px);background-size:72px 72px;mask-image:radial-gradient(ellipse at center,#0006,transparent 72%)}
#companion.hero-pointing:not(.is-floating) .arm-right{animation:none!important;transform-box:view-box;transform-origin:135px 140px;transform:rotate(var(--cursor-arm,0deg))!important;transition:none!important}
@media(max-width:700px){.hero-surface{inset:0 -6px}.hero-surface:before{opacity:.12}}