/* Diffuse overlapping color fields, including the non-canvas fallback. */
.sky{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;background:#b7c4de;overflow:hidden;isolation:isolate}
.sky .flow-fallback,.sky .flow-canvas,.sky .flow-shade{position:absolute;pointer-events:none}
.sky .flow-fallback{inset:-25%;background:radial-gradient(ellipse at 18% 22%,#91c5e6 0%,transparent 64%),radial-gradient(ellipse at 77% 72%,#e9b0c9 0%,transparent 66%),radial-gradient(ellipse at 80% 10%,#e8e8f1 0%,transparent 62%),#bac4dd;animation:flow-fallback-drift 21s ease-in-out infinite alternate;filter:blur(35px)}
.sky .flow-fallback::after{content:"";position:absolute;inset:-15%;background:radial-gradient(ellipse at 70% 18%,rgba(130,192,229,.7),transparent 65%),radial-gradient(ellipse at 25% 82%,rgba(235,172,199,.7),transparent 68%);animation:flow-cloud-drift 29s ease-in-out infinite alternate}
.sky .flow-canvas{inset:-7%;display:block;width:114%;height:114%;opacity:0;filter:blur(24px);transition:opacity .4s ease;image-rendering:auto}
.sky[data-flow-ready="true"] .flow-canvas{opacity:1}
.sky[data-flow-ready="true"] .flow-fallback,.sky[data-flow-ready="true"] .flow-fallback::after{animation-play-state:paused}
.sky .flow-shade{inset:0;background:radial-gradient(ellipse at 50% 45%,transparent 30%,rgba(69,69,109,.035))}
.sky[data-flow-hidden="true"] .flow-fallback,.sky[data-flow-hidden="true"] .flow-fallback::after{animation-play-state:paused}
@keyframes flow-fallback-drift{0%{transform:translate(-6%,-4%) rotate(-10deg) scale(1.08)}50%{transform:translate(7%,2%) rotate(8deg) scale(1.19)}100%{transform:translate(-3%,8%) rotate(-3deg) scale(1.06)}}
@keyframes flow-cloud-drift{from{transform:translate(8%,-6%) rotate(12deg)}to{transform:translate(-9%,8%) rotate(-15deg)}}
@media(prefers-reduced-motion:reduce){.sky .flow-fallback,.sky .flow-fallback::after{animation-duration:90s}.sky .flow-canvas{transition:none}}