#scrollAtmosphere{position:fixed!important;inset:0!important;z-index:0!important;width:100%!important;height:100vh!important;overflow:hidden;pointer-events:none!important;contain:strict;isolation:isolate}
#scrollAtmosphere i{position:absolute;display:block;pointer-events:none}
.atmo-star{color:var(--star-color);font-style:normal;line-height:1;text-shadow:0 0 12px currentColor;transition:translate .18s ease-out,rotate .2s ease-out,opacity .2s;will-change:translate}
.atmo-glow{width:500px;height:500px;border-radius:50%;opacity:.17;background:radial-gradient(circle,#e490ce,transparent 68%);translate:calc(var(--atmo-shift,0)*95px) calc(var(--atmo-shift,0)*65px);transition:translate .3s ease-out}
.ag-one{left:-310px;top:8%}.ag-two{right:-300px;bottom:-50px;background:radial-gradient(circle,#8bd9e8,transparent 68%);translate:calc(var(--atmo-shift,0)*-100px) calc(var(--atmo-shift,0)*-80px)}
.atmo-orbit{width:360px;height:360px;border:1px solid #d7b9ee24;border-radius:50%;box-shadow:0 0 0 14px #cfb3ec06,0 0 0 16px #dabced12;rotate:var(--atmo-turn,0deg);transition:rotate .2s ease-out;transform:scaleY(.58)}
.atmo-orbit:before{content:'✦';position:absolute;left:42px;top:28px;color:#f4cde5a0;font:22px/1 serif;text-shadow:0 0 13px #efc8ff77}
.ao-one{left:-240px;top:28%}.ao-two{right:-240px;bottom:8%;transform:scaleY(.65) rotate(55deg)}
html.hx-entry-open #scrollAtmosphere,body.viewing-artwork #scrollAtmosphere,body.editing #scrollAtmosphere{visibility:hidden}
#scrollAtmosphere.atmo-calm{display:none}
@media(max-width:700px){.atmo-star:nth-child(n+13){display:none}.atmo-orbit{opacity:.6}.atmo-glow{opacity:.12}}
@media(prefers-reduced-motion:reduce),print{#scrollAtmosphere{display:none!important}}
.atmo-charm{opacity:.72;transition:translate .25s ease-out,rotate .25s ease-out;filter:drop-shadow(2px 4px 0 #140c283d)}
.atmo-charm svg{width:100%;height:100%;overflow:visible;animation:charm-hover var(--float-time,7s) ease-in-out var(--float-delay,0s) infinite;image-rendering:pixelated}
@keyframes charm-hover{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-12px) rotate(3deg)}}
@media(max-width:700px){.atmo-charm{opacity:.42;scale:.7;transform-origin:left center}.atmo-charm:nth-child(2n){transform-origin:right center}}
#scrollAtmosphere{position:absolute!important;height:100%!important;contain:paint!important}
.atmo-charm{opacity:.78}
.atmo-meteor{left:0;width:300px;height:150px;opacity:0;transform:translate(-200px,90px) rotate(-8deg);pointer-events:none}
.atmo-meteor svg{width:100%;height:100%;filter:drop-shadow(0 0 6px #e9b2dc44)}
.atmo-meteor.meteor-pass{animation:meteor-single-pass 2.8s cubic-bezier(.22,.55,.3,1) both}
@keyframes meteor-single-pass{0%{opacity:0;transform:translate(-240px,130px) rotate(-8deg)}15%{opacity:.85}65%{opacity:.85}100%{opacity:0;transform:translate(370px,-90px) rotate(4deg)}}
@media(max-width:700px){.atmo-charm{opacity:.58;scale:.65}.atmo-meteor{width:220px;height:110px}@keyframes meteor-single-pass{0%{opacity:0;transform:translate(-200px,90px)}18%,65%{opacity:.75}100%{opacity:0;transform:translate(170px,-80px)}}}
#scrollAtmosphere{z-index:2!important}
.atmo-charm svg{filter:drop-shadow(3px 3px 0 #21102c);image-rendering:pixelated}
.atmo-meteor{width:300px;height:255px}
.atmo-particle{width:4px;height:4px;background:var(--dot);box-shadow:0 0 7px var(--dot);opacity:0;animation:pixel-dust 1.5s ease-out var(--delay) both}
.atmo-particle:nth-child(3n){width:2px;height:9px}.atmo-particle:nth-child(3n):after{content:'';position:absolute;top:3px;left:-3px;width:8px;height:2px;background:var(--dot)}
@keyframes pixel-dust{0%{opacity:0;translate:0 8px;scale:.4}20%{opacity:.85}100%{opacity:0;translate:var(--dx) var(--dy);scale:.2}}
@media(max-width:700px){.atmo-charm{scale:.65;transform-origin:center!important}.atmo-charm:nth-child(2n){left:auto}.atmo-meteor{width:220px;height:187px}}