:root { color-scheme:light; --sky-top:#d3e2e3; --sky-bottom:#edf7f8; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; }
body { background:var(--sky-top); }
main { min-height:100svh; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
/* Fixed under the eventual form: long content never stretches the cloud scene. */
.sky-background { position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
/* Original 1920 × 1080 composition, scaled uniformly and cropped centrally. */
.sky-stage { position:absolute; left:50%; top:50%; width:max(100vw,177.77777778vh); height:max(56.25vw,100vh); transform:translate(-50%,-50%); isolation:isolate; container-type:inline-size; }
@supports(height:100dvh) { .sky-stage { width:max(100vw,177.77777778dvh); height:max(56.25vw,100dvh); } }
/* First layer: muted gradient toward the flagship email's #EDF7F8 sky. */
.sky-base { position:absolute; inset:0; background:linear-gradient(180deg,var(--sky-top),var(--sky-bottom)); }
/* Second layer: pass-through container preserves luminosity against the sky. */
.wispy-layer { position:absolute; inset:0; }
.wisp { position:absolute; display:flex; align-items:center; justify-content:center; mix-blend-mode:luminosity; }
.wisp img { position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; user-select:none; }
.wisp-image { position:relative; flex:none; transform:rotate(179.79deg); }
.wisp-one { left:calc(-2888/1920*100%); top:calc(-904/1080*100%); width:calc(7755/1920*100%); height:calc(2682/1080*100%); opacity:.8; }
.wisp-two { left:calc(-276/1920*100%); top:calc(-179/1080*100%); width:calc(2780.604/1920*100%); height:calc(462.741/1080*100%); }
.wisp-two .wisp-image { width:calc(2778.945/2780.604*100%); height:calc(452.431/462.741*100%); opacity:.56; }
.wisp-three { left:calc(-452/1920*100%); top:calc(127/1080*100%); width:calc(1614.016/1920*100%); height:calc(223.946/1080*100%); }
.wisp-three .wisp-image { width:calc(1613.219/1614.016*100%); height:calc(217.961/223.946*100%); opacity:.64; filter:blur(.41666667cqw); }
.wisp-four { left:calc(790/1920*100%); top:calc(134/1080*100%); width:calc(1798.031/1920*100%); height:calc(299.223/1080*100%); }
.wisp-four .wisp-image { width:calc(1796.957/1798.031*100%); height:calc(292.557/299.223*100%); opacity:.56; filter:blur(.05208333cqw); }