.scene{aspect-ratio:2160/960;background:#94cffd;isolation:isolate}.scene .world-banner{width:100%;height:100%;aspect-ratio:2160/960;max-height:none;object-fit:contain;transform:none!important}.banner-stage{position:absolute;inset:0;opacity:0;pointer-events:none;overflow:hidden}.scene.banner-ready .banner-stage{opacity:1}.scene.banner-ready .world-banner{opacity:0}.banner-layer,.banner-cat{position:absolute;display:block;object-fit:fill;transform-origin:center;will-change:transform}.banner-cat>img{display:block;width:100%;height:100%;object-fit:contain}.banner-eyes{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible}.scene .hotspots{z-index:4}.scene .scene-note{z-index:5;pointer-events:none}.banner-stage .layer-wood{translate:0 var(--wood-drift,0px)}.banner-stage .layer-clouds{translate:0 var(--cloud-drift,0px)}.banner-stage .layer-leaves{translate:0 var(--leaf-drift,0px)}.banner-eyes .moving-iris{will-change:transform}
@media(min-width:1600px){.scene{aspect-ratio:2160/960;max-height:760px}.scene .world-banner{object-fit:fill}}
@media(max-width:760px){.scene{aspect-ratio:auto;height:clamp(300px,82vw,480px)}.scene .world-banner{object-fit:contain}.banner-stage .layer-sky{left:0!important;top:0!important;width:100%!important;height:100%!important;object-fit:cover}.banner-stage .layer-clouds{left:-30%!important;top:8%!important;width:160%!important;height:90%!important;object-fit:cover}.banner-stage .layer-leaves{left:-5%!important;top:-2%!important;width:110%!important;height:auto!important}.banner-stage .layer-wood{left:0!important;top:auto!important;bottom:0;width:100%!important;height:60px!important}.banner-stage .banner-cat{top:auto!important;bottom:39px!important;height:auto!important}.banner-stage .banner-cat>img{height:auto}.banner-stage .cat-daisy{left:0%!important;width:25%!important}.banner-stage .cat-happy{left:23%!important;width:28%!important}.banner-stage .cat-dobby{left:49%!important;width:26%!important}.banner-stage .cat-grumpurr{left:73%!important;width:28%!important}.banner-stage .layer-title{left:6%!important;top:17%!important;width:88%!important;height:auto!important}.banner-stage .layer-subtitle{left:12%!important;top:40%!important;width:76%!important;height:auto!important}.banner-stage .layer-butterfly{height:auto!important}.banner-stage .butterfly-1{left:88%!important;top:50%!important;width:7%!important}.banner-stage .butterfly-2{left:78%!important;top:15%!important;width:5%!important}.banner-stage .butterfly-3{left:4%!important;top:51%!important;width:7%!important}.banner-stage .butterfly-4{left:10%!important;top:12%!important;width:8%!important}.scene .hotspot{top:auto;bottom:37px;height:110px;width:25%;border-radius:14px}.scene .hotspot.daisy{left:0}.scene .hotspot.happy{left:25%}.scene .hotspot.dobby{left:50%}.scene .hotspot.grumpurr{left:75%}.scene .scene-note{bottom:17px;font-size:.8125rem;padding:4px 12px;max-width:96%;white-space:normal;text-align:center}}
@media(prefers-reduced-motion:reduce){.banner-layer,.banner-cat{will-change:auto}.banner-stage .layer-wood,.banner-stage .layer-clouds,.banner-stage .layer-leaves{translate:none}.banner-eyes .moving-iris{will-change:auto}}
@media(max-width:760px){.banner-stage .layer-title{left:6%!important;top:23%!important;width:88%!important;height:auto!important}.banner-stage .layer-subtitle{left:14%!important;top:44%!important;width:72%!important;height:auto!important}}
@media(min-width:1600px){.scene{max-height:none}.scene .world-banner{object-fit:contain}}

/* Keep the authentic art; soften only the outer silhouette by <1 source pixel. */
.banner-filter-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.banner-cat>img{filter:url(#banner-soft-outline)}
.banner-stage .layer-leaves{overflow:visible}
.canopy-left{translate:var(--canopy-left-x,0px) var(--canopy-left-y,0px)}
.canopy-right{translate:var(--canopy-right-x,0px) var(--canopy-right-y,0px)}
.scene.banner-ready .layer-butterfly{animation:butterfly-float 5.8s ease-in-out infinite;animation-play-state:paused}
.scene.banner-in-view.banner-ready .layer-butterfly{animation-play-state:running}
.scene.banner-ready .butterfly-2{animation-duration:6.7s;animation-delay:-2.1s}
.scene.banner-ready .butterfly-3{animation-duration:6.2s;animation-delay:-3.8s}
.scene.banner-ready .butterfly-4{animation-duration:7.1s;animation-delay:-1.4s}
@keyframes butterfly-float{0%,100%{translate:0 0;rotate:-2deg}50%{translate:2px -9px;rotate:2deg}}
@media(max-width:760px){.banner-stage .layer-leaves{height:auto!important;aspect-ratio:2164/423}}
@media(prefers-reduced-motion:reduce){.scene.banner-ready .layer-butterfly{animation:none;translate:none;rotate:none}.canopy-left,.canopy-right{translate:none}}

/* Fill the first viewport while keeping the four characters in proportion. */
.world-hero .scene{height:calc(100svh - var(--banner-header-height,80px));min-height:360px;max-height:none;aspect-ratio:auto}
.world-hero .scene .world-banner{height:100%;aspect-ratio:auto;object-fit:cover;object-position:center bottom}
@media(min-width:761px){
 .banner-stage .banner-cat{top:auto!important;bottom:11.5625%;height:auto!important}
 .banner-stage .banner-cat>img{height:auto}
 .banner-stage .layer-wood{top:auto!important;bottom:0;height:15.9375%!important}
 .banner-stage .layer-leaves{height:auto!important;aspect-ratio:2164/423}
 .scene .hotspot{top:auto;bottom:11.5625%;height:45%}
 .banner-stage .layer-butterfly{height:auto!important}
}
@media(max-width:760px){.world-hero .scene{min-height:400px}.banner-stage .layer-clouds{top:0!important;height:100%!important}.scene .hotspot{height:clamp(110px,27vw,205px)}}

/* Anchor the native cloud canvas, without stretching it to a tall viewport. */
.world-hero .banner-stage .layer-clouds{left:0!important;top:auto!important;bottom:0;width:100%!important;height:auto!important;object-fit:contain;aspect-ratio:2166/969}
.world-hero .banner-stage .layer-butterfly{top:auto!important;height:auto!important;object-fit:contain}
.world-hero .banner-stage .butterfly-1{left:82%!important;bottom:calc(11.5625% + 20vw);width:clamp(28px,3.4vw,60px)!important}
.world-hero .banner-stage .butterfly-2{left:75%!important;bottom:calc(11.5625% + 26vw);width:clamp(22px,2.2vw,40px)!important}
.world-hero .banner-stage .butterfly-3{left:8%!important;bottom:calc(11.5625% + 20vw);width:clamp(28px,3.4vw,60px)!important}
.world-hero .banner-stage .butterfly-4{left:16%!important;bottom:calc(11.5625% + 26vw);width:clamp(32px,3.8vw,66px)!important}
@media(max-width:760px){
 .world-hero .banner-stage .layer-clouds{left:-20%!important;width:140%!important}
 .world-hero .banner-stage .butterfly-1{left:84%!important;bottom:calc(60px + 30vw);width:7%!important}
 .world-hero .banner-stage .butterfly-2{left:73%!important;bottom:calc(60px + 40vw);width:5%!important}
 .world-hero .banner-stage .butterfly-3{left:5%!important;bottom:calc(60px + 30vw);width:7%!important}
 .world-hero .banner-stage .butterfly-4{left:17%!important;bottom:calc(60px + 40vw);width:8%!important}
}

/* Retain the complete fallback while decoded layers fade in together. */
.scene .banner-stage,.scene .world-banner{transition:opacity 240ms ease-out}
.banner-layer,.banner-cat{will-change:auto}
.scene:not(.banner-in-view) .layer-butterfly{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.scene .banner-stage,.scene .world-banner{transition:none}}